mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 08:59:15 +08:00
e767502bdb
* docs: add showIcon demo * fix: update snap
81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { CarryOutOutlined } from '@ant-design/icons';
|
|
import { Space, Switch, TreeSelect } from 'antd';
|
|
|
|
const treeData = [
|
|
{
|
|
value: 'parent 1',
|
|
title: 'parent 1',
|
|
icon: <CarryOutOutlined />,
|
|
children: [
|
|
{
|
|
value: 'parent 1-0',
|
|
title: 'parent 1-0',
|
|
icon: <CarryOutOutlined />,
|
|
children: [
|
|
{
|
|
value: 'leaf1',
|
|
title: 'leaf1',
|
|
icon: <CarryOutOutlined />,
|
|
},
|
|
{
|
|
value: 'leaf2',
|
|
title: 'leaf2',
|
|
icon: <CarryOutOutlined />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
value: 'parent 1-1',
|
|
title: 'parent 1-1',
|
|
icon: <CarryOutOutlined />,
|
|
children: [
|
|
{
|
|
value: 'sss',
|
|
title: 'sss',
|
|
icon: <CarryOutOutlined />,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const App: React.FC = () => {
|
|
const [treeLine, setTreeLine] = useState(true);
|
|
const [showLeafIcon, setShowLeafIcon] = useState(false);
|
|
const [showIcon, setShowIcon] = useState<boolean>(false);
|
|
|
|
return (
|
|
<Space direction="vertical">
|
|
<Switch
|
|
checkedChildren="showIcon"
|
|
unCheckedChildren="showIcon"
|
|
checked={showIcon}
|
|
onChange={() => setShowIcon(!showIcon)}
|
|
/>
|
|
<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}
|
|
treeIcon={showIcon}
|
|
/>
|
|
</Space>
|
|
);
|
|
};
|
|
|
|
export default App;
|