up iconfont

This commit is contained in:
然则 2015-08-14 23:28:20 +08:00
parent 6da7db4ec2
commit 82bf118a73
4 changed files with 39 additions and 20 deletions

View File

@ -9,27 +9,21 @@
````jsx
var Tree = antd.Tree;
var TreeNode = Tree.TreeNode;
function handleSelect(selected, c, selectedKeys) {
console.log('selected: ', selected, c, selectedKeys );
}
function handleChecked(checked, c) {
console.log('checked: ', checked, c );
}
React.render(
<Tree className="myCls" onSelect={handleSelect} onChecked={handleChecked}>
<TreeNode title="parent 1" expanded={true}>
<Tree className="myCls" expandAll={true} onChecked={handleChecked}>
<TreeNode title="parent 1">
<TreeNode>leaf </TreeNode>
<TreeNode title="parent 1-1">
<TreeNode title="parent 2-1">
<TreeNode>leaf </TreeNode>
<TreeNode>leaf </TreeNode>
</TreeNode>
<TreeNode>leaf </TreeNode>
<TreeNode>leaf </TreeNode>
</TreeNode>
</TreeNode>
<TreeNode>leaf </TreeNode>
<TreeNode>leaf </TreeNode>
</Tree>
, document.getElementById('components-tree-demo-basic'));
````

View File

@ -9,7 +9,6 @@
````jsx
var Tree = antd.Tree;
var TreeNode = Tree.TreeNode;
var Checkbox = antd.Checkbox;
React.render(
<Tree expandAll={true} checkable={true}>
<TreeNode title="parent 1">

View File

@ -56,7 +56,7 @@
"rc-table": "~3.1.0",
"rc-tabs": "~5.2.0",
"rc-tooltip": "~2.4.0",
"rc-tree": "~0.13.0",
"rc-tree": "~0.13.1",
"rc-util": "~2.0.3",
"react-slick": "~0.6.4"
},

View File

@ -1,7 +1,24 @@
@treePrefixCls: ant-tree;
@import "../mixins/iconfont";
@openIcon: '\e60f';
.switcher_icon() {
position: relative;
&:after {
.iconfont-size-under-12px(6px);
content: @openIcon;
display: inline-block;
font-family: 'anticon';
font-weight: bold;
position: absolute;
top: 10px;
right: 4px;
color: #666;
}
}
.@{treePrefixCls} {
margin:0; padding:5px;
margin:0; padding:5px; font-size: 12px;
li {
padding: 0; margin: 0;
list-style: none; white-space: nowrap; outline: 0;
@ -16,6 +33,7 @@
padding:1px 3px 0 0; margin:0;
cursor:pointer; height:20px;
text-decoration:none; vertical-align:top;
color: #666;
}
span {
line-height:20px; margin-right:2px;
@ -30,17 +48,25 @@
background: #fff; position: relative;
&:after{content: '-'; position: absolute; top: 8px; left: 6px; color: gray;}
}
&.@{treePrefixCls}-roots_open { background-position: -94px 0}
&.@{treePrefixCls}-roots_close{ background-position:-76px 0}
&.@{treePrefixCls}-center_open{ background-position:-94px -18px}
&.@{treePrefixCls}-center_close{ background-position:-76px -18px}
&.@{treePrefixCls}-bottom_open{ background-position:-94px -36px}
&.@{treePrefixCls}-bottom_close{ background-position:-76px -36px}
&.@{treePrefixCls}-noline_open{ background-position:-94px -72px}
&.@{treePrefixCls}-noline_close{ background-position:-76px -72px}
background-position: 0 20px;
&.@{treePrefixCls}-roots_open,
&.@{treePrefixCls}-center_open,
&.@{treePrefixCls}-bottom_open,
&.@{treePrefixCls}-noline_open{ .switcher_icon(); }
&.@{treePrefixCls}-roots_close,
&.@{treePrefixCls}-center_close,
&.@{treePrefixCls}-bottom_close,
&.@{treePrefixCls}-noline_close{
.switcher_icon();
&:after{
.ie-rotate(3);
// .rotate(270deg);
transform: rotate(270deg) scale(0.5);
}
}
}
&.@{treePrefixCls}-chk {
width: 15px; height: 15px; margin: 0 3px;
width: 15px; height: 15px; margin: 0 3px 0 0;
&-disabled {
background-position: 0 -28px;
}