mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 23:35:38 +08:00
24d165ab9b
* Add ability to customize leafIcon * Adapt docs * Update test snapshots * Update to single prop & adapt demo * Update tests * Rename icon type * Fix docs * Rename to .tsx and fix types * Remove useless id properties in test
3.5 KiB
3.5 KiB
order | title | ||||
---|---|---|---|---|---|
5 |
|
zh-CN
节点之间带连接线的树,常用于文件目录结构展示。使用 showLine
开启,可以用 switcherIcon
修改默认图标。
en-US
Tree with connected line between nodes, turn on by showLine
, customize the preseted icon by switcherIcon
.
import { CarryOutOutlined, CheckOutlined, FormOutlined } from '@ant-design/icons';
import { Select, Switch, Tree } from 'antd';
import type { DataNode } from 'antd/es/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>(true);
const [showIcon, setShowIcon] = useState<boolean>(false);
const [showLeafIcon, setShowLeafIcon] = useState<boolean | React.ReactNode>(true);
const onSelect = (selectedKeys: React.Key[], info: any) => {
console.log('selected', selectedKeys, info);
};
const handleLeafIconChange = (value: 'true' | 'false' | 'custom') => {
if (value === 'custom') {
return setShowLeafIcon(<CheckOutlined />);
}
if (value === 'true') {
return setShowLeafIcon(true);
}
return setShowLeafIcon(false);
};
return (
<div>
<div style={{ marginBottom: 16 }}>
showLine: <Switch checked={!!showLine} onChange={setShowLine} />
<br />
<br />
showIcon: <Switch checked={showIcon} onChange={setShowIcon} />
<br />
<br />
showLeafIcon:{' '}
<Select defaultValue="true" onChange={handleLeafIconChange}>
<Select.Option value="true">True</Select.Option>
<Select.Option value="false">False</Select.Option>
<Select.Option value="custom">Custom icon</Select.Option>
</Select>
</div>
<Tree
showLine={showLine ? { showLeafIcon } : false}
showIcon={showIcon}
defaultExpandedKeys={['0-0-0']}
onSelect={onSelect}
treeData={treeData}
/>
</div>
);
};
export default App;