quasar/dist/api/QTree.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/tree"},"props":{"nodes":{"type":"Array","tsType":"QTreeNode","desc":"The array of nodes that designates the tree structure","required":true,"examples":["[ {}, {} ]"],"category":"content"},"node-key":{"type":"String","desc":"The property name of each node object that holds a unique node id","required":true,"examples":["'key'","'id'"],"category":"content"},"label-key":{"type":"String","desc":"The property name of each node object that holds the label of the node","default":"'label'","examples":["'name'","'description'"],"category":"content","required":false},"children-key":{"type":"String","desc":"The property name of each node object that holds the list of children of the node","default":"'children'","examples":["'roles'","'relatives'"],"category":"content","required":false},"no-connectors":{"type":"Boolean","desc":"Do not display the connector lines between nodes","category":"style"},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"control-color":{"type":"String","tsType":"NamedColor","desc":"Color name for controls (like checkboxes) from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"text-color":{"type":"String","tsType":"NamedColor","desc":"Overrides text color (if needed); Color name from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"selected-color":{"type":"String","tsType":"NamedColor","desc":"Color name for selected nodes (from the Quasar Color Palette)","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style","addedIn":"v2.2.4"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"icon":{"type":"String","desc":"Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"tick-strategy":{"type":"String","desc":"The type of strategy to use for the selection of the nodes","default":"'none'","values":["'none'","'strict'","'leaf'","'leaf-filtered'"],"category":"behavior","required":false},"ticked":{"type":"Array","desc":"Keys of nodes that are ticked","sync":true,"examples":["# v-model:ticked=\"tickedKeys\""],"category":"state","syncable":true},"expanded":{"type":"Array","desc":"Keys of nodes that are expanded","sync":true,"examples":["# v-model:expanded=\"expandedKeys\""],"category":"state","syncable":true},"selected":{"type":"Any","desc":"Key of node currently selected","sync":true,"examples":["# v-model:selected=\"selectedKey\""],"category":"state","syncable":true},"no-selection-unset":{"type":"Boolean","desc":"Do not allow un-selection when clicking currently selected node","category":"behavior","addedIn":"v2.4.10"},"default-expand-all":{"type":"Boolean","desc":"Allow the tree to have all its branches expanded, when first rendered","category":"behavior"},"accordion":{"type":"Boolean","desc":"Allows the tree to be set in accordion mode","category":"behavior"},"no-transition":{"type":"Boolean","desc":"Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees","category":"behavior","addedIn":"v2.9.2"},"filter":{"type":"String","desc":"The text value to be used for filtering nodes","examples":["'car'"],"category":"filter"},"filter-method":{"type":"Function","desc":"The function to use to filter the tree nodes; For best performance, reference it from your scope and do not define it inline","params":{"node":{"type":"Object","desc":"Node currently being filtered"},"filter":{"type":"String","desc":"Filter text to match against"}},"returns":{"type":"Boolean","desc":"Matches or not"},"examples":["(node, filter) => node.label.toLowerCase().indexOf(filter.toLowerCase()) !== -1"],"category":"filter"},"duration":{"type":"Number","desc":"Toggle animation duration (in milliseconds)","default":"300","category":"style","required":false},"no-nodes-label":{"type":"String","desc":"Override default such label for when no nodes are available","examples":["'No nodes to show!'"],"category":"content"},"no-results-label":{"type":"String","desc":"Override default such label for when no nodes are available due to filtering","examples":["'No results'"],"category":"content"}},"slots":{"default-header":{"desc":"Slot to use for defining the header of a node","scope":{"expanded":{"type":"Boolean","desc":"Is node expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"ticked":{"type":"Boolean","desc":"Is node ticked? Can directly be assigned new Boolean value which changes ticked state","reactive":true},"tree":{"type":"Component","tsType":"QTree","desc":"QTree instance"},"node":{"type":"Object","desc":"Node object"},"key":{"type":"Any","desc":"Node's key"},"color":{"type":"String","desc":"QTree instance 'color' supplied prop value","examples":["'primary'"]},"dark":{"type":"Boolean","desc":"QTree instance 'dark' supplied prop value"}}},"header-[name]":{"desc":"Header template slot for describing node header; Used by nodes which have their 'header' prop set to '[name]', where '[name]' can be any string","scope":{"expanded":{"type":"Boolean","desc":"Is node expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"ticked":{"type":"Boolean","desc":"Is node ticked? Can directly be assigned new Boolean value which changes ticked state","reactive":true},"tree":{"type":"Component","tsType":"QTree","desc":"QTree instance"},"node":{"type":"Object","desc":"Node object"},"key":{"type":"Any","desc":"Node's key"},"color":{"type":"String","desc":"QTree instance 'color' supplied prop value","examples":["'primary'"]},"dark":{"type":"Boolean","desc":"QTree instance 'dark' supplied prop value"}}},"default-body":{"desc":"Slot to use for defining the body of a node","scope":{"expanded":{"type":"Boolean","desc":"Is node expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"ticked":{"type":"Boolean","desc":"Is node ticked? Can directly be assigned new Boolean value which changes ticked state","reactive":true},"tree":{"type":"Component","tsType":"QTree","desc":"QTree instance"},"node":{"type":"Object","desc":"Node object"},"key":{"type":"Any","desc":"Node's key"},"color":{"type":"String","desc":"QTree instance 'color' supplied prop value","examples":["'primary'"]},"dark":{"type":"Boolean","desc":"QTree instance 'dark' supplied prop value"}}},"body-[name]":{"desc":"Body template slot for describing node body; Used by nodes which have their 'body' prop set to '[name]', where '[name]' can be any string","scope":{"expanded":{"type":"Boolean","desc":"Is node expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"ticked":{"type":"Boolean","desc":"Is node ticked? Can directly be assigned new Boolean value which changes ticked state","reactive":true},"tree":{"type":"Component","tsType":"QTree","desc":"QTree instance"},"node":{"type":"Object","desc":"Node object"},"key":{"type":"Any","desc":"Node's key"},"color":{"type":"String","desc":"QTree instance 'color' supplied prop value","examples":["'primary'"]},"dark":{"type":"Boolean","desc":"QTree instance 'dark' supplied prop value"}}}},"events":{"update:expanded":{"desc":"Triggered when nodes are expanded or collapsed; Used by Vue on 'v-model:update' to update its value","params":{"expanded":{"type":"Array","desc":"The expanded node keys","examples":["[ 'Node 1', 'Node 2' ]"]}}},"lazy-load":{"desc":"Emitted when the lazy loading of nodes is finished","params":{"details":{"type":"Object","desc":"Lazy loading details","definition":{"node":{"type":"Object","required":true,"desc":"The node to which the new nodes (the children) will be appended"},"key":{"type":"String","required":true,"desc":"The key of the node getting the newly loaded child nodes","examples":["'New Node'"]},"done":{"type":"Function","required":true,"desc":"The callback to be carried out when the loading is successful","params":{"children":{"type":"Array","desc":"Array of nodes","default":"[]","required":false}},"returns":null},"fail":{"type":"Function","required":true,"desc":"The callback to be carried out should the loading fails","params":null,"returns":null}}}}},"update:ticked":{"desc":"Emitted when nodes are ticked/unticked via the checkbox; Used by Vue on 'v-model:ticked' to update its value","params":{"target":{"type":"Array","desc":"The ticked node keys","examples":["[ 'Node 1', 'Node 2' ]"]}}},"update:selected":{"desc":"Emitted when selected node changes; Used by Vue on 'v-model:selected' to update its value","params":{"target":{"type":"Any","desc":"The selected node key","examples":["'Node 1'"]}}},"after-show":{"desc":"Emitted when component show animation is finished"},"after-hide":{"desc":"Emitted when component hide animation is finished"}},"methods":{"getNodeByKey":{"desc":"Get the node with the given key","params":{"key":{"type":"Any","required":true,"desc":"The key of a node","examples":["'Node 1'"]}},"returns":{"type":"Object","desc":"Requested node"}},"getTickedNodes":{"desc":"Get array of nodes that are ticked","params":null,"returns":{"type":"Array","desc":"Ticked node objects"}},"getExpandedNodes":{"desc":"Get array of nodes that are expanded","params":null,"returns":{"type":"Array","desc":"Expanded node objects"}},"isExpanded":{"desc":"Determine if a node is expanded","params":{"key":{"type":"Any","required":true,"desc":"The key of a node","examples":["'Node 1'"]}},"returns":{"type":"Boolean","desc":"Is specified node expanded?"}},"expandAll":{"desc":"Use to expand all branches of the tree","params":null,"returns":null},"collapseAll":{"desc":"Use to collapse all branches of the tree","params":null,"returns":null},"setExpanded":{"desc":"Expands the tree at the point of the node with the key given","params":{"key":{"type":"Any","required":true,"desc":"The key of a node","examples":["'Node 1'"]},"state":{"type":"Boolean","required":true,"desc":"Set to 'true' to expand the branch of the tree, otherwise 'false' collapses it"}},"returns":null},"isTicked":{"desc":"Method to check if a node's checkbox is selected or not","params":{"key":{"type":"Any","required":true,"desc":"The key of a node","examples":["'Node 1'"]}},"returns":{"type":"Boolean","desc":"Is specified node ticked?"}},"setTicked":{"desc":"Method to set a node's checkbox programmatically","params":{"keys":{"type":"Array","required":true,"desc":"The keys of nodes to tick/untick","examples":["[ 'Node 1', 'Node 2' ]"]},"state":{"type":"Boolean","required":true,"desc":"Set to 'true' to tick the checkbox of nodes, otherwise 'false' unticks them"}},"returns":null}}}