ant-design/components/tree/demo/line.md

129 lines
3.3 KiB
Markdown
Raw Normal View History

---
order: 5
title:
zh-CN: 连接线
en-US: Tree with line
---
## zh-CN
2019-12-11 18:22:06 +08:00
节点之间带连接线的树,常用于文件目录结构展示。使用 `showLine` 开启,可以用 `switcherIcon` 修改默认图标。
## en-US
2019-12-11 18:22:06 +08:00
Tree with connected line between nodes, turn on by `showLine`, customize the preseted icon by `switcherIcon`.
```tsx
2020-01-22 12:11:49 +08:00
import React, { useState } from 'react';
2019-12-25 19:09:17 +08:00
import { Tree, Switch } from 'antd';
import { CarryOutOutlined, FormOutlined } from '@ant-design/icons';
import type { DataNode } from 'antd/lib/tree';
2018-06-27 15:55:04 +08:00
const treeData: DataNode[] = [
{
title: 'parent 1',
key: '0-0',
2019-12-25 19:09:17 +08:00
icon: <CarryOutOutlined />,
children: [
{
title: 'parent 1-0',
key: '0-0-0',
2019-12-25 19:09:17 +08:00
icon: <CarryOutOutlined />,
children: [
2019-12-25 19:09:17 +08:00
{ title: 'leaf', key: '0-0-0-0', icon: <CarryOutOutlined /> },
{
title: (
<>
<div>multiple line title</div>
<div>multiple line title</div>
</>
),
key: '0-0-0-1',
icon: <CarryOutOutlined />,
},
2019-12-25 19:09:17 +08:00
{ title: 'leaf', key: '0-0-0-2', icon: <CarryOutOutlined /> },
],
},
{
title: 'parent 1-1',
key: '0-0-1',
2019-12-25 19:09:17 +08:00
icon: <CarryOutOutlined />,
children: [{ title: 'leaf', key: '0-0-1-0', icon: <CarryOutOutlined /> }],
},
{
title: 'parent 1-2',
key: '0-0-2',
2019-12-25 19:09:17 +08:00
icon: <CarryOutOutlined />,
children: [
{ title: 'leaf', key: '0-0-2-0', icon: <CarryOutOutlined /> },
{
title: 'leaf',
key: '0-0-2-1',
icon: <CarryOutOutlined />,
switcherIcon: <FormOutlined />,
},
],
},
],
},
{
title: 'parent 2',
key: '0-1',
icon: <CarryOutOutlined />,
children: [
{
title: 'parent 2-0',
key: '0-1-0',
icon: <CarryOutOutlined />,
children: [
{ title: 'leaf', key: '0-1-0-0', icon: <CarryOutOutlined /> },
{ title: 'leaf', key: '0-1-0-1', icon: <CarryOutOutlined /> },
],
},
],
},
];
const App: React.FC = () => {
const [showLine, setShowLine] = useState<boolean | { showLeafIcon: boolean }>(true);
const [showIcon, setShowIcon] = useState<boolean>(false);
const [showLeafIcon, setShowLeafIcon] = useState<boolean>(true);
2019-12-11 18:22:06 +08:00
const onSelect = (selectedKeys: React.Key[], info: any) => {
console.log('selected', selectedKeys, info);
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
const onSetLeafIcon = (checked: boolean) => {
setShowLeafIcon(checked);
setShowLine({ showLeafIcon: checked });
};
const onSetShowLine = (checked: boolean) => {
setShowLine(checked ? { showLeafIcon } : false);
};
2019-12-25 19:09:17 +08:00
return (
<div>
<div style={{ marginBottom: 16 }}>
showLine: <Switch checked={!!showLine} onChange={onSetShowLine} />
2019-12-25 19:09:17 +08:00
<br />
<br />
showIcon: <Switch checked={showIcon} onChange={setShowIcon} />
<br />
<br />
showLeafIcon: <Switch checked={showLeafIcon} onChange={onSetLeafIcon} />
2019-12-11 18:22:06 +08:00
</div>
2019-12-25 19:09:17 +08:00
<Tree
showLine={showLine}
showIcon={showIcon}
defaultExpandedKeys={['0-0-0']}
onSelect={onSelect}
treeData={treeData}
/>
</div>
);
};
export default App;
2019-05-07 14:57:32 +08:00
```