| 1 | @# Tree
|
| 2 |
|
| 3 | Trees display hierarchical data.
|
| 4 |
|
| 5 | @reactExample TreeExample
|
| 6 |
|
| 7 | @## Props
|
| 8 |
|
| 9 | `Tree` is a stateless component. Its contents are dictated by the `contents` prop, which is an array
|
| 10 | of `ITreeNode`s (see [below](#components/tree.tree-node)). The tree is multi-rooted if
|
| 11 | `contents` contains more than one top-level object.
|
| 12 |
|
| 13 | A variety of interaction callbacks are also exposed as props. All interaction callbacks supply a
|
| 14 | parameter `nodePath`, which is an array of numbers representing a node's position in the tree. For
|
| 15 | example, `[2, 0]` represents the first child (`0`) of the third top-level node (`2`).
|
| 16 |
|
| 17 | @interface ITreeProps
|
| 18 |
|
| 19 | @### Instance methods
|
| 20 |
|
| 21 | * `Tree.getNodeContentElement(nodeId: string | number): HTMLElement | undefined` –
|
| 22 | Returns the underlying HTML element of the `Tree` node with an id of `nodeId`.
|
| 23 | This element does not contain the children of the node, only its label and controls.
|
| 24 | If the node is not currently mounted, `undefined` is returned.
|
| 25 |
|
| 26 | @### Tree node
|
| 27 |
|
| 28 | `ITreeNode` objects determine the contents, appearance, and state of each node in the tree.
|
| 29 |
|
| 30 | For example, `icon` controls the icon displayed for the node, and `isExpanded` determines
|
| 31 | whether the node's children are shown.
|
| 32 |
|
| 33 | @interface ITreeNodeProps
|
| 34 |
|
| 35 | @## CSS
|
| 36 |
|
| 37 | <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
|
| 38 |
|
| 39 | Note that the following examples set a maximum width and background color for the tree;
|
| 40 | you may want to do this as well in your own usage.
|
| 41 |
|
| 42 | </div>
|
| 43 |
|
| 44 | @css tree
|