material-ui-tree-english
v1.0.11
Published
[![npm package](https://img.shields.io/npm/v/material-ui-tree.svg)](https://www.npmjs.org/package/material-ui-tree) [![npm download](https://img.shields.io/npm/dt/material-ui-tree.svg)](https://www.npmjs.org/package/material-ui-tree) [![github license](ht
Downloads
2
Maintainers
Readme
material-ui-tree
A react tree component with material-ui.
See demo page: Material-ui-tree Demo
Installation
Available as npm package.
npm install --save material-ui-tree
Ensure to install these packages in your program because material-ui-tree
depends on them.
npm install --save
react
react-dom
prop-types
classnames
material-ui@next
material-ui-icons
Usage
See demo page code:
Options
All options are not necessary.
className: (string) The className
will passed to container Paper
component of material-ui.
labelName: (string) Label key to show in tree leaf data. Default to 'label'
. If renderLabel
option is set, labelName
will be ignored.
valueName: (string) Value key in tree leaf data. Used for react children key. Default to 'value'
.
childrenName: (string) Children key to render child branch in tree leaf data. Default to 'children'
.
data: (object) Initial tree data. Default to {}
.
title: (string) Tree title. Default to ''
. If not set, title module will not show.
expandFirst: (bool) Whether expand the first branch of the tree in the beginning. Default to false
.
expandAll: (bool) Whether expand all branches of the tree in the beginning. Default to false
.
childrenCountPerPage: (number) Children leafs' count in each branch page. When tree leaf children data is too big, render them by page. Default to 20
.
actionsAlignRight: (bool) Whether the tree leaf action buttons aligns to right side. Action buttons will follow behind leaf label if it's false, or else will be aligned to right side. Default to false
.
getActionsData: (func) The method to get data to render action buttons, with arguments:
data
: object, current leaf datachdIndex
: number array, leaf indexs from tree rootexpand
: bool, leaf expand statusdoExpand
: func, callback to expand current leaf's child branch
Should return an array of buttons data including keys:icon
,label
,hint
,onClick
,style={}
. At least one oflabel
key andicon
key are required.
renderLabel: (func) The method to render tree leaf label, with arguments:
data
: object, current leaf dataexpand
: bool, current leaf expand status
If this is set,labelName
option will be ignored.
requestChildrenData: (func) The method to request children data of tree leaf dynamically, with arguments:
data
: object, current leaf datachdIndex
: number array, leaf indexs from tree rootdoExpand
: func, callback to expand current leaf's child branch
This function will not be called until the current leaf has no children data.
Recently updated?
Changelog available here
LICENSE
The project is licensed under the terms of MIT license