test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

up tree and checkbox

Browse Source
This commit is contained in:
然则 2015-08-16 20:04:42 +08:00
parent 61f061b00f
commit bf52026789
4 changed files with 87 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/tree/demo/checkbox.md
View File

@ -13,7 +13,7 @@ function handleCheck(checked, c, checkedKeys) {
console.log('checked: ', checked, c );
}
React.render(
<Tree defaultExpandAll={true} checkable={true} onCheck={handleCheck}>
<Tree defaultExpandAll={true} checkable={<span className="ant-tree-checkbox-inner"></span>} onCheck={handleCheck}>
<TreeNode title="parent 1">
<TreeNode>leaf </TreeNode>
<TreeNode title="parent 1-1">

2
components/tree/index.md
View File

@ -15,7 +15,7 @@
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| checkable | 是否支持选中 | bool | false |
|checkable | 是否支持选中 | bool/React Node | false |
|defaultExpandAll | 设置展开所有树节点 | bool | false |
|defaultExpandedKeys | 展开指定的树节点 | String[] | false |
|defaultCheckedKeys | 默认选中的树节点 | String[] | [] |

21
style/components/checkbox.less
View File

@ -59,6 +59,27 @@
}
}
/* 半选状态 */
.@{checkboxWrapPrefixCls}-indeterminate {
.@{checkboxInnerPrefixCls} {
border-color: @primary-color;
background-color: rgba(215, 216, 217, 1);
&:after {
transform: rotate(45deg) scale(1);
position: absolute;
left: 4px;
top: 1px;
display: table;
width: 5px;
height: 8px;
border: 2px solid #ffffff;
border-top: 0;
border-left: 0;
content: ' ';
transition: all .2s @ease-out-back .1s;
}
}
}
/* 选中状态 */
.@{checkboxWrapPrefixCls}-checked {

110
style/components/tree.less
View File

@ -1,5 +1,6 @@
@treePrefixCls: ant-tree;
@import "./checkbox";
@checkboxWrapPrefixCls: ant-tree-checkbox;
@import "../mixins/iconfont";
@openIcon: '\e60f';
.switcher_icon() {
@ -16,68 +17,85 @@
color: #666;
}
}
.@{treePrefixCls} {
margin:0; padding:5px; font-size: 12px;
margin: 0;
padding: 5px;
font-size: 12px;
li {
padding: 0; margin: 0;
list-style: none; white-space: nowrap; outline: 0;
padding: 0;
margin: 0;
list-style: none;
white-space: nowrap;
outline: 0;
ul {
margin:0; padding:0 0 0 18px;
&.@{treePrefixCls}-line{
background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y;
}
margin: 0;
padding: 0 0 0 18px;
&.@{treePrefixCls}-line {
background: url("https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif") 0 0 repeat-y;
}
}
a {
display: inline-block;
padding:1px 3px 0 0; margin:0;
cursor:pointer; height:20px;
text-decoration:none; vertical-align:top;
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;
&.@{treePrefixCls}-button {
line-height:0; margin:0; width:16px; height:16px;
display: inline-block; vertical-align:middle;
border:0 none; cursor: pointer;outline:none;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png");
&.@{treePrefixCls}-switcher {
&-disabled {
background: #fff; position: relative;
&:after{content: '-'; position: absolute; top: 8px; left: 6px; color: gray;}
}
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);
transform: rotate(270deg) scale(0.5);
}
&.@{treePrefixCls}-switcher,
&.@{treePrefixCls}-iconEle {
line-height: 0;
margin: 0;
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
border: 0 none;
cursor: pointer;
outline: none;
background-color: transparent;
background-repeat: no-repeat;
background-attachment: scroll;
// background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png");
}
&.@{treePrefixCls}-switcher {
&-disabled {
background: #fff;
position: relative;
&:after {
content: '-';
position: absolute;
top: 8px;
left: 6px;
color: gray;
}
}
&.@{treePrefixCls}-checkbox {
width: 15px; height: 15px; margin: 0 3px 0 0;
background-position:0 0;
&-disabled {
background-position: 0 -28px;
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);
transform: rotate(270deg) scale(0.5);
}
&.@{treePrefixCls}-checkbox-checked {background-position:-14px 0}
&.@{treePrefixCls}-checkbox-indeterminate {background-position:-14px -30px}
}
}
}
}
&-treenode-disabled {
>span, >a {
>span,
>a {
color: gray;
}
}