Mirrors
/
ant-design
mirror of https://github.com/ant-design/ant-design.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update tree doc for customize icon (#9893)

Browse Source 
* update doc for customize icon
* add test case
pull/9948/head
zombieJ 7 years ago committed by GitHub
parent 1612ef6990
commit 49719b20d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 155 deletions
Show Stats Download Patch File Download Diff File

120
components/tree/__tests__/__snapshots__/demo.test.js.snap
Unescape Escape View File

@ -486,7 +486,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
<ul
class="ant-tree ant-tree-show-line"
class="ant-tree"
role="tree-node"
unselectable="on"
>
@ -501,8 +501,12 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
title="parent 1"
>
<span
class="ant-tree-iconEle ant-tree-icon__open"
/>
class="ant-tree-iconEle ant-tree-icon__customize"
>
<i
class="anticon anticon-smile-o"
/>
</span>
<span
class="ant-tree-title"
>
@ -517,111 +521,25 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
class=""
>
<span
class="ant-tree-switcher ant-tree-switcher_open"
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
title="parent 1-0"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"
title="leaf"
>
<span
class="ant-tree-iconEle ant-tree-icon__open"
/>
<span
class="ant-tree-title"
class="ant-tree-iconEle ant-tree-icon__customize"
>
parent 1-0
</span>
</span>
<ul
class="ant-tree-child-tree ant-tree-child-tree-open"
data-expanded="true"
>
<li
class=""
>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
<i
class="anticon anticon-meh-o"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="leaf"
>
<span
class="ant-tree-iconEle ant-tree-icon__docu"
/>
<span
class="ant-tree-title"
>
leaf
</span>
</span>
</li>
<li
class=""
>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="leaf"
>
<span
class="ant-tree-iconEle ant-tree-icon__docu"
/>
<span
class="ant-tree-title"
>
leaf
</span>
</span>
</li>
</ul>
</li>
<li
class=""
>
<span
class="ant-tree-switcher ant-tree-switcher_open"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
title="parent 1-1"
>
<span
class="ant-tree-iconEle ant-tree-icon__open"
/>
</span>
<span
class="ant-tree-title"
>
parent 1-1
leaf
</span>
</span>
<ul
class="ant-tree-child-tree ant-tree-child-tree-open"
data-expanded="true"
>
<li
class=""
>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="leaf"
>
<span
class="ant-tree-iconEle ant-tree-icon__docu"
/>
<span
class="ant-tree-title"
>
leaf
</span>
</span>
</li>
</ul>
</li>
<li
class=""
@ -634,8 +552,12 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
title="leaf"
>
<span
class="ant-tree-iconEle ant-tree-icon__docu"
/>
class="ant-tree-iconEle ant-tree-icon__customize"
>
<i
class="anticon anticon-frown-o"
/>
</span>
<span
class="ant-tree-title"
>

70
components/tree/demo/customized-icon.md
Unescape Escape View File

@ -1,6 +1,5 @@
---
order: 6
debug: true
title:
zh-CN: 自定义图标
en-US: Customize Icon
@ -8,38 +7,33 @@ title:
## zh-CN
可以针对不同节点采用样式覆盖的方式定制图标。
可以针对不同的节点定制图标。
## en-US
You can customize icons for different nodes by styles override.
You can customize icons for different nodes.
````jsx
import { Tree } from 'antd';
import { Tree, Icon } 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}
defaultExpandAll
defaultSelectedKeys={['0-0-0']}
>
<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 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>
);
@ -48,39 +42,3 @@ class Demo extends React.Component {
ReactDOM.render(<Demo />, mountNode);
````
```css
#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;
}
```

1
components/tree/index.en-US.md
Unescape Escape View File

@ -57,6 +57,7 @@ Almost anything can be represented in a tree structure. Examples include directo
## Note
Before `3.4.0`:
The number of treeNodes can be very large, but when `checkable=true`,
it will increase the compute time. So, we cache some calculations (e.g. `this.treeNodesStates`)
to avoid double computing. But, this brings some restrictions.

1
components/tree/index.zh-CN.md
Unescape Escape View File

@ -58,6 +58,7 @@ subtitle: 树形控件
## 注意
在 `3.4.0` 之前：
树节点可以有很多，但在设置`checkable`时，将会花费更多的计算时间，因此我们缓存了一些计算结果（`this.treeNodesStates`）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：
```jsx

Write Preview
Loading…
Cancel
Save