diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap index c5e72979fb..522fb26bcd 100644 --- a/components/tree/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap @@ -1538,302 +1538,462 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = ` `; exports[`renders ./components/tree/demo/line.md correctly 1`] = ` - + + + `; exports[`renders ./components/tree/demo/search.md correctly 1`] = ` diff --git a/components/tree/demo/line.md b/components/tree/demo/line.md index 8fa3f9370c..db4f3b3bee 100644 --- a/components/tree/demo/line.md +++ b/components/tree/demo/line.md @@ -7,40 +7,67 @@ title: ## zh-CN -节点之间带连接线的树，常用于文件目录结构展示。 +节点之间带连接线的树，常用于文件目录结构展示。使用 `showLine` 开启，可以用 `switcherIcon` 修改默认图标。 ## en-US -Tree with connected line between nodes. +Tree with connected line between nodes, turn on by `showLine`, customize the preseted icon by `switcherIcon`. ```jsx -import { Tree, Icon } from 'antd'; +import { Tree, Icon, Switch } from 'antd'; const { TreeNode } = Tree; class Demo extends React.Component { - onSelect = (selectedKeys, info) => { - console.log('selected', selectedKeys, info); - }; + state = { + showLine: true, + showIcon: false, + } + + onShowLineChange = showLine => { + this.setState({ showLine }); + } + + onShowIconChange = showIcon => { + this.setState({ showIcon }); + } render() { + const { showIcon, showLine } = this.state; return ( - - - - - - +
+
+ showLine: +
+
+ showIcon: +
+ + } title="parent 1" key="0-0"> + } title="parent 1-0" key="0-0-0"> + } title="leaf" key="0-0-0-0" /> + } title="leaf" key="0-0-0-1" /> + } title="leaf" key="0-0-0-2" /> + + } title="parent 1-1" key="0-0-1"> + } title="leaf" key="0-0-1-0" /> + + } title="parent 1-2" key="0-0-2"> + } title="leaf" key="0-0-2-0" /> + } + icon={} + title="leaf" + key="0-0-2-1" + /> + - - - - - - } title="leaf" key="0-0-2-1" /> - - - + +
); } }