mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
45 lines
866 B
Markdown
45 lines
866 B
Markdown
---
|
|
order: 6
|
|
title:
|
|
zh-CN: 自定义图标
|
|
en-US: Customize Icon
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
可以针对不同的节点定制图标。
|
|
|
|
## en-US
|
|
|
|
You can customize icons for different nodes.
|
|
|
|
````jsx
|
|
import { Tree, Icon } from 'antd';
|
|
const TreeNode = Tree.TreeNode;
|
|
|
|
class Demo extends React.Component {
|
|
render() {
|
|
return (
|
|
<Tree
|
|
showIcon
|
|
defaultExpandAll
|
|
defaultSelectedKeys={['0-0-0']}
|
|
>
|
|
<TreeNode icon={<Icon type="smile-o" />} title="parent 1" key="0-0">
|
|
<TreeNode icon={<Icon type="meh-o" />} title="leaf" key="0-0-0" />
|
|
<TreeNode
|
|
icon={({ selected }) => (
|
|
<Icon type={selected ? 'frown' : 'frown-o'} />
|
|
)}
|
|
title="leaf"
|
|
key="0-0-1"
|
|
/>
|
|
</TreeNode>
|
|
</Tree>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
````
|