ant-design/components/tree/demo/customized-icon.md
2018-06-27 16:09:58 +08:00

867 B

order title
6
zh-CN en-US
自定义图标 Customize Icon

zh-CN

可以针对不同的节点定制图标。

en-US

You can customize icons for different nodes.

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);