mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
2.0 KiB
2.0 KiB
order | debug | title | ||||
---|---|---|---|---|---|---|
6 | true |
|
zh-CN
可以针对不同节点采用样式覆盖的方式定制图标。
en-US
You can customize icons for different nodes by styles override.
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
class Demo extends React.Component {
onSelect = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
}
render() {
return (
<Tree
showIcon
showLine
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
onSelect={this.onSelect}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0">
<TreeNode title="leaf" key="0-0-0-0" />
<TreeNode title="leaf" key="0-0-0-1" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title="leaf" key="0-0-1-0" />
</TreeNode>
<TreeNode title="leaf" key="0-0-2" />
</TreeNode>
</Tree>
);
}
}
ReactDOM.render(<Demo />, mountNode);
#components-tree-demo-customized-icon .ant-tree-iconEle {
position: absolute;
left: 0;
background: #fff;
}
#components-tree-demo-customized-icon .ant-tree-iconEle::after {
font-size: 12px;
zoom: 1;
display: inline-block;
font-family: 'anticon';
text-rendering: optimizeLegibility;
color: #999;
transition: transform .3s ease;
margin-top: 2px;
background: #fff;
}
#components-tree-demo-customized-icon .ant-tree-iconEle.ant-tree-icon__docu::after {
content: "\E664";
}
#components-tree-demo-customized-icon .ant-tree-iconEle.ant-tree-icon__open::after {
content: "\E699";
}
#components-tree-demo-customized-icon .ant-tree-iconEle.ant-tree-icon__close::after {
content: "\E662";
}
#components-tree-demo-customized-icon .ant-tree-switcher {
position: relative;
z-index: 1;
background: transparent;
}
#components-tree-demo-customized-icon .ant-tree-switcher::after {
opacity: 0;
}