2019-11-21 13:22:09 +00:00
# TreeMenu
2019-06-11 12:00:02 +00:00
Tree menu description
2019-11-21 13:22:09 +00:00
### Usage
2019-06-11 12:00:02 +00:00
```js
2022-07-22 19:01:25 +00:00
import TreeMenu from "@docspace/components/tree-menu";
2019-11-21 13:22:09 +00:00
```
```jsx
< TreeMenu data = {data} / >
2019-06-11 12:00:02 +00:00
```
2019-11-21 13:22:09 +00:00
### Properties TreeMenu
2020-10-14 16:09:03 +00:00
| Props | Type | Required | Values | Default | Description |
| ----------------------- | :------------: | :------: | :----: | :-----: | ------------------------------------------------------------------------------------------------------- |
| `autoExpandParent` | `bool` | - | - | `false` | Whether auto expand parent treeNodes |
| `checkable` | `bool` | - | - | `false` | Whether support checked |
| `className` | `string` | - | - | - | Accepts class |
| `defaultExpandAll` | `bool` | - | - | `false` | Expand all treeNodes |
| `defaultExpandParent` | `bool` | - | - | `true` | Auto expand parent treeNodes when init |
| `disabled` | `bool` | - | - | `false` | Whether disabled the tree |
| `draggable` | `bool` | - | - | `false` | Whether can drag treeNode |
| `id` | `string` | - | - | - | Accepts id |
| `multiple` | `bool` | - | - | `false` | Whether multiple select |
| `onDragEnd` | `func` | - | - | - | it execs when fire the tree's dragend event |
| `onDragEnter` | `func` | - | - | - | it execs when fire the tree's dragenter event |
| `onDragLeave` | `func` | - | - | - | it execs when fire the tree's dragleave event |
| `onDragOver` | `func` | - | - | - | it execs when fire the tree's dragover event |
| `onDragStart` | `func` | - | - | - | it execs when fire the tree's dragstart event |
| `onDrop` | `func` | - | - | - | it execs when fire the tree's drop event |
| `onExpand` | `func` | - | - | - | fire on treeNode expand or not |
| `onLoad` | `func` | - | - | - | Trigger when a node is loaded. If you set the loadedKeys, you must handle onLoad to avoid infinity loop |
| `onMouseEnter` | `func` | - | - | - | call when mouse enter a treeNode |
| `onMouseLeave` | `func` | - | - | - | call when mouse leave a treeNode |
| `onRightClick` | `func` | - | - | - | select current treeNode and show customized contextmenu |
| `onSelect` | `func` | - | - | - | click the treeNode to fire |
| `showIcon` | `bool` | - | - | `true` | Whether show icon |
| `showLine` | `bool` | - | - | `false` | Whether show line |
| `style` | `obj` , `array` | - | - | - | Accepts css style |
| `loadData` | `func` | - | - | - | load data asynchronously and the return value should be a promise |
| `isFullFillSelection` | `bool` | - | - | `true` | to select the selection style of the active node |
| `gapBetweenNodes` | `string` | - | - | `15` | for setting the spacing between nodes |
| `gapBetweenNodesTablet` | `string` | - | - | - | to set spacing between nodes on tablets and phones (if necessary) |
| `isEmptyRootNode` | `bool` | - | - | `false` | swipe the root node to the left if there are no nested elements |
2019-11-21 13:22:09 +00:00
### Properties TreeNode
| Props | Type | Required | Values | Default | Description |
| ----------------- | :----------------: | :------: | :----: | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `checkable` | `bool` | - | - | - | control node checkable if Tree is checkable |
2019-12-03 14:01:10 +00:00
| `className` | `string` | - | - | - | additional class to treeNode |
2019-11-21 13:22:09 +00:00
| `disableCheckbox` | `bool` | - | - | `false` | whether disable the treeNode' checkbox |
2019-12-03 14:01:10 +00:00
| `disabled` | `bool` | - | - | `false` | whether disabled the treeNode |
| `icon` | `element` ,`func` | - | - | `false` | customize icon. When you pass component, whose render will receive full TreeNode props as component props |
2019-11-21 13:22:09 +00:00
| `isLeaf` | `bool` | - | - | `false` | whether it's leaf node |
2019-12-03 14:01:10 +00:00
| `key` | `bool` | - | - | - | it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes |
| `style` | `object` | - | - | - | set style to treeNode |
| `title` | `string` ,`element` | - | - | - | tree/subTree's title |
2020-10-15 07:50:49 +00:00
| `newItems` | `number` | - | - | - | The number of new elements in the node |
2020-10-14 16:09:03 +00:00
| `onBadgeClick` | `func` | - | - | - | call when click on badge |
2020-10-15 07:50:49 +00:00
| `showBadge` | `bool` | - | - | - | to display the badge |
