mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 15:19:58 +08:00
66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { Space, Switch, TreeSelect } from 'antd';
|
||
|
|
||
|
const treeData = [
|
||
|
{
|
||
|
value: 'parent 1',
|
||
|
title: 'parent 1',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'parent 1-0',
|
||
|
title: 'parent 1-0',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'leaf1',
|
||
|
title: 'leaf1',
|
||
|
},
|
||
|
{
|
||
|
value: 'leaf2',
|
||
|
title: 'leaf2',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'parent 1-1',
|
||
|
title: 'parent 1-1',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'sss',
|
||
|
title: 'sss',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
];
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [treeLine, setTreeLine] = useState(true);
|
||
|
const [showLeafIcon, setShowLeafIcon] = useState(false);
|
||
|
|
||
|
return (
|
||
|
<Space direction="vertical">
|
||
|
<Switch
|
||
|
checkedChildren="treeLine"
|
||
|
unCheckedChildren="treeLine"
|
||
|
checked={treeLine}
|
||
|
onChange={() => setTreeLine(!treeLine)}
|
||
|
/>
|
||
|
<Switch
|
||
|
disabled={!treeLine}
|
||
|
checkedChildren="showLeafIcon"
|
||
|
unCheckedChildren="showLeafIcon"
|
||
|
checked={showLeafIcon}
|
||
|
onChange={() => setShowLeafIcon(!showLeafIcon)}
|
||
|
/>
|
||
|
<TreeSelect
|
||
|
treeLine={treeLine && { showLeafIcon }}
|
||
|
style={{ width: 300 }}
|
||
|
treeData={treeData}
|
||
|
/>
|
||
|
</Space>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|