如何向树和treenode添加自定义图标

问题描述 投票:0回答:1

我正在使用antd tree ui组件构建一个树,并希望将我自己的图标example something.png或jpg文件添加到每个treeNode。我怎么实现这个,请帮帮忙?

reactjs antd
1个回答
0
投票

Tree接受名为switcherIcon的支柱,TreeNode接受名为icon的支柱。提到的道具可以是任何有效的ReactNodeFunction(props):ReactNode。通常最好使用antd提供的默认Icon组件,但你也可以使用自己的<img/>

使用antd Icon的示例:

<Tree
  showIcon
  defaultExpandAll
  defaultSelectedKeys={['0-0-0']}
  switcherIcon={<Icon type="down" />}
>
  <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={<Icon type="meh-o" />} title="leaf" key="0-0-1" />
  </TreeNode>
</Tree>

使用您自己的自定义图像:

首先定义您的组件:

const CustomIcon = () => (
  <img
    style={{ width: 15, padding: 1 }} // some custom style to look good
    src="https://image.flaticon.com/icons/svg/109/109688.svg" // use your imported .png or .jpg file instead
    alt="Custom Icon"
  />
);

然后以与上一个示例相同的方式使用它:

<Tree
  showIcon
  defaultExpandAll
  defaultSelectedKeys={['0-0-0']}
  switcherIcon={<CustomIcon />}
>
  <TreeNode icon={<CustomIcon />} title="parent 1" key="0-0">
    <TreeNode icon={<CustomIcon />} title="leaf" key="0-0-0" />
    <TreeNode icon={<CustomIcon />} title="leaf" key="0-0-1" />
  </TreeNode>
</Tree>

这是一个关于沙箱的演示:

Edit zn9r60mpzp

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.