Initiated Tree Component
cagataycivici
parent
0335e99a9a
commit
b9c040d723
|
|
@ -0,0 +1,54 @@
|
|||
{
|
||||
"root": [
|
||||
{
|
||||
"key": "0",
|
||||
"label": "Documents",
|
||||
"data": "Documents Folder",
|
||||
"icon": "pi pi-fw pi-inbox",
|
||||
"children": [{
|
||||
"key": "0-0",
|
||||
"label": "Work",
|
||||
"data": "Work Folder",
|
||||
"icon": "pi pi-fw pi-cog",
|
||||
"children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
|
||||
},
|
||||
{
|
||||
"key": "0-1",
|
||||
"label": "Home",
|
||||
"data": "Home Folder",
|
||||
"icon": "pi pi-fw pi-home",
|
||||
"children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
|
||||
}]
|
||||
},
|
||||
{
|
||||
"key": "1",
|
||||
"label": "Events",
|
||||
"data": "Events Folder",
|
||||
"icon": "pi pi-fw pi-calendar",
|
||||
"children": [
|
||||
{ "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
|
||||
{ "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
|
||||
{ "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
|
||||
},
|
||||
{
|
||||
"key": "2",
|
||||
"label": "Movies",
|
||||
"data": "Movies Folder",
|
||||
"icon": "pi pi-fw pi-star",
|
||||
"children": [{
|
||||
"key": "2-0",
|
||||
"icon": "pi pi-fw pi-star",
|
||||
"label": "Al Pacino",
|
||||
"data": "Pacino Movies",
|
||||
"children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
|
||||
},
|
||||
{
|
||||
"key": "2-1",
|
||||
"label": "Robert De Niro",
|
||||
"icon": "pi pi-fw pi-star",
|
||||
"data": "De Niro Movies",
|
||||
"children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,353 @@
|
|||
{
|
||||
"root":
|
||||
[
|
||||
{
|
||||
"key": "0",
|
||||
"data":{
|
||||
"name":"Applications",
|
||||
"size":"100kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "0-0",
|
||||
"data":{
|
||||
"name":"React",
|
||||
"size":"25kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "0-0-0",
|
||||
"data":{
|
||||
"name":"react.app",
|
||||
"size":"10kb",
|
||||
"type":"Application"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "0-0-1",
|
||||
"data":{
|
||||
"name":"native.app",
|
||||
"size":"10kb",
|
||||
"type":"Application"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "0-0-2",
|
||||
"data":{
|
||||
"name":"mobile.app",
|
||||
"size":"5kb",
|
||||
"type":"Application"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "0-1",
|
||||
"data":{
|
||||
"name":"editor.app",
|
||||
"size":"25kb",
|
||||
"type":"Application"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "0-2",
|
||||
"data":{
|
||||
"name":"settings.app",
|
||||
"size":"50kb",
|
||||
"type":"Application"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "1",
|
||||
"data":{
|
||||
"name":"Cloud",
|
||||
"size":"20kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "1-0",
|
||||
"data":{
|
||||
"name":"backup-1.zip",
|
||||
"size":"10kb",
|
||||
"type":"Zip"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "1-1",
|
||||
"data":{
|
||||
"name":"backup-2.zip",
|
||||
"size":"10kb",
|
||||
"type":"Zip"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "2",
|
||||
"data": {
|
||||
"name":"Desktop",
|
||||
"size":"150kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "2-0",
|
||||
"data":{
|
||||
"name":"note-meeting.txt",
|
||||
"size":"50kb",
|
||||
"type":"Text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "2-1",
|
||||
"data":{
|
||||
"name":"note-todo.txt",
|
||||
"size":"100kb",
|
||||
"type":"Text"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "3",
|
||||
"data":{
|
||||
"name":"Documents",
|
||||
"size":"75kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "3-0",
|
||||
"data":{
|
||||
"name":"Work",
|
||||
"size":"55kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "3-0-0",
|
||||
"data":{
|
||||
"name":"Expenses.doc",
|
||||
"size":"30kb",
|
||||
"type":"Document"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "3-0-1",
|
||||
"data":{
|
||||
"name":"Resume.doc",
|
||||
"size":"25kb",
|
||||
"type":"Resume"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "3-1",
|
||||
"data":{
|
||||
"name":"Home",
|
||||
"size":"20kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "3-1-0",
|
||||
"data":{
|
||||
"name":"Invoices",
|
||||
"size":"20kb",
|
||||
"type":"Text"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "4",
|
||||
"data": {
|
||||
"name":"Downloads",
|
||||
"size":"25kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "4-0",
|
||||
"data": {
|
||||
"name":"Spanish",
|
||||
"size":"10kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "4-0-0",
|
||||
"data":{
|
||||
"name":"tutorial-a1.txt",
|
||||
"size":"5kb",
|
||||
"type":"Text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "4-0-1",
|
||||
"data":{
|
||||
"name":"tutorial-a2.txt",
|
||||
"size":"5kb",
|
||||
"type":"Text"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "4-1",
|
||||
"data":{
|
||||
"name":"Travel",
|
||||
"size":"15kb",
|
||||
"type":"Text"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "4-1-0",
|
||||
"data":{
|
||||
"name":"Hotel.pdf",
|
||||
"size":"10kb",
|
||||
"type":"PDF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "4-1-1",
|
||||
"data":{
|
||||
"name":"Flight.pdf",
|
||||
"size":"5kb",
|
||||
"type":"PDF"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "5",
|
||||
"data": {
|
||||
"name":"Main",
|
||||
"size":"50kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "5-0",
|
||||
"data":{
|
||||
"name":"bin",
|
||||
"size":"50kb",
|
||||
"type":"Link"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "5-1",
|
||||
"data":{
|
||||
"name":"etc",
|
||||
"size":"100kb",
|
||||
"type":"Link"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "5-2",
|
||||
"data":{
|
||||
"name":"var",
|
||||
"size":"100kb",
|
||||
"type":"Link"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "6",
|
||||
"data":{
|
||||
"name":"Other",
|
||||
"size":"5kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "6-0",
|
||||
"data":{
|
||||
"name":"todo.txt",
|
||||
"size":"3kb",
|
||||
"type":"Text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "6-1",
|
||||
"data":{
|
||||
"name":"logo.png",
|
||||
"size":"2kb",
|
||||
"type":"Picture"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "7",
|
||||
"data":{
|
||||
"name":"Pictures",
|
||||
"size":"150kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "7-0",
|
||||
"data":{
|
||||
"name":"barcelona.jpg",
|
||||
"size":"90kb",
|
||||
"type":"Picture"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "7-1",
|
||||
"data":{
|
||||
"name":"primeng.png",
|
||||
"size":"30kb",
|
||||
"type":"Picture"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "7-2",
|
||||
"data":{
|
||||
"name":"prime.jpg",
|
||||
"size":"30kb",
|
||||
"type":"Picture"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "8",
|
||||
"data":{
|
||||
"name":"Videos",
|
||||
"size":"1500kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"key": "8-0",
|
||||
"data":{
|
||||
"name":"primefaces.mkv",
|
||||
"size":"1000kb",
|
||||
"type":"Video"
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": "8-1",
|
||||
"data":{
|
||||
"name":"intro.avi",
|
||||
"size":"500kb",
|
||||
"type":"Video"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -62,6 +62,7 @@
|
|||
<router-link to="/organizationchart">● Org Chart</router-link>
|
||||
<router-link to="/paginator">● Paginator</router-link>
|
||||
<router-link to="/picklist">● PickList</router-link>
|
||||
<router-link to="/tree">● Tree</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,194 @@
|
|||
<template>
|
||||
<div :class="containerClass">
|
||||
<ul class="p-tree-container" role="tree">
|
||||
<TreeNode v-for="node of value" :key="node.key" :node="node"
|
||||
:expandedKeys="d_expandedKeys" @toggle="onNodeToggle"></TreeNode>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeNode from './TreeNode';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
expandedKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_expandedKeys: this.expandedKeys || {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
expandedKeys(newValue) {
|
||||
this.d_expandedKeys = newValue;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onNodeToggle(node) {
|
||||
const key = node.key;
|
||||
|
||||
if (this.d_expandedKeys[key]) {
|
||||
delete this.d_expandedKeys[key];
|
||||
this.$emit('node-collapse', node);
|
||||
}
|
||||
else {
|
||||
this.d_expandedKeys[key] = true;
|
||||
this.$emit('node-expand', node);
|
||||
}
|
||||
|
||||
this.d_expandedKeys = {...this.d_expandedKeys};
|
||||
this.$emit('update:expandedKeys', this.d_expandedKeys);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return 'p-tree p-component';
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'TreeNode': TreeNode
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-tree {
|
||||
width: 24em;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode-selectable.p-treenode-content {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-container {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
padding: .25em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode-children {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode {
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-position: 0 0;
|
||||
background-repeat: repeat-y;
|
||||
list-style: none outside none;
|
||||
margin: 0;
|
||||
padding: .125em 0 0 0;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode-droppoint {
|
||||
height: 4px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode-droppoint-active {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-toggler {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-toggler .p-tree-toggler-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode-label {
|
||||
display: inline-block;
|
||||
padding: 0 .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-tree .p-treenode.p-treenode-leaf > .p-treenode-content > .p-tree-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-tree .p-checkbox-box {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-tree .p-checkbox {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-tree .p-checkbox .p-checkbox-icon {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-filter {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-filter-container {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0.4em;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-filter-container .p-tree-filter-icon {
|
||||
position: absolute;
|
||||
top: .8em;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
/** Fluid **/
|
||||
.p-fluid .p-tree {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/** Loading **/
|
||||
.p-tree.p-tree-loading {
|
||||
position: relative;
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-loading-mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
|
||||
opacity: 0.1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-loading-content {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
margin-top: -1em;
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-loading-content .p-tree-loading-icon {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<li :class="containerClass">
|
||||
<div class="p-treenode-content" tabindex="0" role="treeitem">
|
||||
<span class="p-tree-toggler p-unselectable-text p-link" @click="toggle">
|
||||
<span :class="toggleIcon"></span>
|
||||
</span>
|
||||
<span :class="icon"></span>
|
||||
<span class="p-treenode-label">{{node.label}}</span>
|
||||
</div>
|
||||
<ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
|
||||
<sub-treenode v-for="childNode of node.children" :key="childNode.key" :node="childNode"
|
||||
:expandedKeys="expandedKeys" @toggle="onChildNodeToggle"></sub-treenode>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sub-treenode',
|
||||
props: {
|
||||
node: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
expandedKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.$emit('toggle', this.node);
|
||||
},
|
||||
onChildNodeToggle(node) {
|
||||
this.$emit('toggle', node);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasChildren() {
|
||||
return this.node.children && this.node.children.length > 0;
|
||||
},
|
||||
expanded() {
|
||||
return this.expandedKeys && this.expandedKeys[this.node.key] === true;
|
||||
},
|
||||
leaf() {
|
||||
return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
|
||||
},
|
||||
containerClass() {
|
||||
return ['p-treenode', {'p-treenode-leaf': this.leaf}];
|
||||
},
|
||||
icon() {
|
||||
return ['p-treenode-icon', this.node.icon];
|
||||
},
|
||||
toggleIcon() {
|
||||
return ['p-tree-toggler-icon pi pi-fw', {
|
||||
'pi-caret-down': this.expanded,
|
||||
'pi-caret-right': !this.expanded
|
||||
}];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -44,12 +44,13 @@ import Slider from './components/slider/Slider';
|
|||
import Sidebar from './components/sidebar/Sidebar';
|
||||
import SplitButton from './components/splitbutton/SplitButton';
|
||||
import Spinner from './components/spinner/Spinner';
|
||||
import TabView from './components/tabview/TabView';
|
||||
import TabPanel from './components/tabpanel/TabPanel';
|
||||
import Textarea from './components/textarea/Textarea';
|
||||
import Tree from './components/tree/Tree';
|
||||
import Toast from './components/toast/Toast';
|
||||
import ToastService from './components/toast/ToastService';
|
||||
import Toolbar from './components/toolbar/Toolbar';
|
||||
import TabView from './components/tabview/TabView';
|
||||
import TabPanel from './components/tabpanel/TabPanel';
|
||||
import ToggleButton from './components/togglebutton/ToggleButton';
|
||||
import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
|
||||
import ValidationMessage from './components/validationmessage/ValidationMessage';
|
||||
|
|
@ -117,6 +118,7 @@ Vue.component('Textarea', Textarea);
|
|||
Vue.component('Toast', Toast);
|
||||
Vue.component('Toolbar', Toolbar);
|
||||
Vue.component('ToggleButton', ToggleButton);
|
||||
Vue.component('Tree', Tree);
|
||||
Vue.component('TriStateCheckbox', TriStateCheckbox);
|
||||
Vue.component('ValidationMessage', ValidationMessage);
|
||||
|
||||
|
|
|
|||
|
|
@ -355,6 +355,11 @@ export default new Router({
|
|||
path: '/toolbar',
|
||||
name: 'toolbar',
|
||||
component: () => import('./views/toolbar/ToolbarDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/tree',
|
||||
name: 'tree',
|
||||
component: () => import('./views/tree/TreeDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/tristatecheckbox',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import axios from 'axios';
|
||||
|
||||
export default class NodeService {
|
||||
|
||||
getTreeTableNodes() {
|
||||
return axios.get('demo/data/treetablenodes.json')
|
||||
.then(res => res.data.root);
|
||||
}
|
||||
|
||||
getTreeNodes() {
|
||||
return axios.get('demo/data/treenodes.json')
|
||||
.then(res => res.data.root);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Tree</h1>
|
||||
<p>Tree is used to display hierarchical data.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Tree :value="nodes"></Tree>
|
||||
</div>
|
||||
|
||||
<TreeDoc />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import NodeService from '../../service/NodeService';
|
||||
import TreeDoc from './TreeDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeNodes().then(data => this.nodes = data);
|
||||
},
|
||||
components: {
|
||||
'TreeDoc': TreeDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import Tree from 'primevue/tree';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>A model can be bound using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<TriStateCheckbox v-model="value" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<p>Any valid attribute such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>boolean</td>
|
||||
<td>null</td>
|
||||
<td>Value of the component.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>change</td>
|
||||
<td>event: Browser event</td>
|
||||
<td>Callback to invoke on value change.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>input</td>
|
||||
<td>event: Value of checkbox</td>
|
||||
<td>Callback to invoke on click.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>click</td>
|
||||
<td>event: Browser event</td>
|
||||
<td>Callback to invoke click.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>focus</td>
|
||||
<td>event: Browser event</td>
|
||||
<td>Callback to invoke on focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>blur</td>
|
||||
<td>event: Browser event</td>
|
||||
<td>Callback to invoke on blur.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-chkbox</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-tristatechkbox</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-chkbox-box</td>
|
||||
<td>Container of icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-chkbox-icon</td>
|
||||
<td>Icon element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tristatecheckbox" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>TriStateCheckbox</h1>
|
||||
<p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<TriStateCheckbox v-model="value" />
|
||||
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue