mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-09 12:59:12 +08:00
129 lines
3.3 KiB
Markdown
129 lines
3.3 KiB
Markdown
---
|
|
order: 5
|
|
title:
|
|
zh-CN: 连接线
|
|
en-US: Tree with line
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
节点之间带连接线的树,常用于文件目录结构展示。使用 `showLine` 开启,可以用 `switcherIcon` 修改默认图标。
|
|
|
|
## en-US
|
|
|
|
Tree with connected line between nodes, turn on by `showLine`, customize the preseted icon by `switcherIcon`.
|
|
|
|
```tsx
|
|
import { CarryOutOutlined, FormOutlined } from '@ant-design/icons';
|
|
import { Switch, Tree } from 'antd';
|
|
import type { DataNode } from 'antd/lib/tree';
|
|
import React, { useState } from 'react';
|
|
|
|
const treeData: DataNode[] = [
|
|
{
|
|
title: 'parent 1',
|
|
key: '0-0',
|
|
icon: <CarryOutOutlined />,
|
|
children: [
|
|
{
|
|
title: 'parent 1-0',
|
|
key: '0-0-0',
|
|
icon: <CarryOutOutlined />,
|
|
children: [
|
|
{ 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 />,
|
|
},
|
|
{ title: 'leaf', key: '0-0-0-2', icon: <CarryOutOutlined /> },
|
|
],
|
|
},
|
|
{
|
|
title: 'parent 1-1',
|
|
key: '0-0-1',
|
|
icon: <CarryOutOutlined />,
|
|
children: [{ title: 'leaf', key: '0-0-1-0', icon: <CarryOutOutlined /> }],
|
|
},
|
|
{
|
|
title: 'parent 1-2',
|
|
key: '0-0-2',
|
|
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);
|
|
|
|
const onSelect = (selectedKeys: React.Key[], info: any) => {
|
|
console.log('selected', selectedKeys, info);
|
|
};
|
|
|
|
const onSetLeafIcon = (checked: boolean) => {
|
|
setShowLeafIcon(checked);
|
|
setShowLine({ showLeafIcon: checked });
|
|
};
|
|
|
|
const onSetShowLine = (checked: boolean) => {
|
|
setShowLine(checked ? { showLeafIcon } : false);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ marginBottom: 16 }}>
|
|
showLine: <Switch checked={!!showLine} onChange={onSetShowLine} />
|
|
<br />
|
|
<br />
|
|
showIcon: <Switch checked={showIcon} onChange={setShowIcon} />
|
|
<br />
|
|
<br />
|
|
showLeafIcon: <Switch checked={showLeafIcon} onChange={onSetLeafIcon} />
|
|
</div>
|
|
<Tree
|
|
showLine={showLine}
|
|
showIcon={showIcon}
|
|
defaultExpandedKeys={['0-0-0']}
|
|
onSelect={onSelect}
|
|
treeData={treeData}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|