mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
984 B
984 B
order | title | ||||
---|---|---|---|---|---|
6 |
|
zh-CN
可以针对不同的节点定制图标。
en-US
You can customize icons for different nodes.
import {
DownOutlined,
FrownFilled,
FrownOutlined,
MehOutlined,
SmileOutlined,
} from '@ant-design/icons';
import { Tree } from 'antd';
import type { DataNode } from 'antd/es/tree';
import React from 'react';
const treeData: DataNode[] = [
{
title: 'parent 1',
key: '0-0',
icon: <SmileOutlined />,
children: [
{
title: 'leaf',
key: '0-0-0',
icon: <MehOutlined />,
},
{
title: 'leaf',
key: '0-0-1',
icon: ({ selected }) => (selected ? <FrownFilled /> : <FrownOutlined />),
},
],
},
];
const App: React.FC = () => (
<Tree
showIcon
defaultExpandAll
defaultSelectedKeys={['0-0-0']}
switcherIcon={<DownOutlined />}
treeData={treeData}
/>
);
export default App;