mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
包装rc-tree，样式待修改
This commit is contained in:
ioldfish
parent
9917f92558
commit
c18af7db79
32
components/tree/demo/basic.md
Normal file
32
components/tree/demo/basic.md
Normal file
@ -0,0 +1,32 @@
|
||||
# 基本
|
||||
|
||||
- order: 0
|
||||
|
||||
最简单的用法。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Tree = antd.Tree;
|
||||
var TreeNode = Tree.TreeNode;
|
||||
React.render(
|
||||
<Tree className="myCls" checkable={true}>
|
||||
<TreeNode title="parent 1" expanded={false}>
|
||||
<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>
|
||||
<TreeNode>leaf </TreeNode>
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
, document.getElementById('components-tree-demo-basic'));
|
||||
````
|
||||
|
||||
15
components/tree/index.jsx
Normal file
15
components/tree/index.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import Tree from 'rc-tree'
|
||||
var TreeNode = Tree.TreeNode;
|
||||
|
||||
var antDTree = React.createClass({
|
||||
|
||||
render() {
|
||||
return <Tree {...this.props} >
|
||||
{this.props.children}
|
||||
</Tree>
|
||||
}
|
||||
});
|
||||
antDTree.TreeNode = TreeNode;
|
||||
module.exports = antDTree;
|
||||
3
index.js
3
index.js
@ -27,7 +27,8 @@ var antd = {
|
||||
Radio: require('./components/radio'),
|
||||
RadioGroup: require('./components/radio/group'),
|
||||
Alert: require('./components/alert'),
|
||||
Validation: require('./components/validation')
|
||||
Validation: require('./components/validation'),
|
||||
Tree: require('./components/Tree')
|
||||
};
|
||||
|
||||
module.exports = antd;
|
||||
|
||||
@ -55,7 +55,8 @@
|
||||
"rc-switch": "~1.2.0",
|
||||
"rc-table": "~3.1.0",
|
||||
"rc-tabs": "~5.2.0",
|
||||
"rc-tooltip": "~2.4.0"
|
||||
"rc-tooltip": "~2.4.0",
|
||||
"rc-tree": "~0.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer-loader": "~2.0.0",
|
||||
|
||||
@ -25,3 +25,4 @@
|
||||
@import "radio";
|
||||
@import "tag";
|
||||
@import "alert";
|
||||
@import "tree";
|
||||
|
||||
88
style/components/tree.less
Normal file
88
style/components/tree.less
Normal file
@ -0,0 +1,88 @@
|
||||
@treePrefixCls: rc-tree;
|
||||
|
||||
.@{treePrefixCls} {
|
||||
margin:0; padding:5px;
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
line-height: 14px;
|
||||
white-space: nowrap;
|
||||
outline: 0;
|
||||
|
||||
ul{ margin:0; padding:0 0 0 18px}
|
||||
ul.line{
|
||||
//background:url(./img/line_conn.gif) 0 0 repeat-y;
|
||||
background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y;
|
||||
}
|
||||
a {
|
||||
padding:1px 3px 0 0; margin:0;
|
||||
cursor:pointer; height:17px;
|
||||
background-color: transparent;
|
||||
text-decoration:none;
|
||||
vertical-align:top; display: inline-block
|
||||
}
|
||||
span {line-height:16px; margin-right:2px}
|
||||
span.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("./img/zTreeStandard.png");
|
||||
background-image:url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png");
|
||||
}
|
||||
span.button.roots_open { background-position: -92px 0; }
|
||||
span.button.roots_close{background-position:-74px 0}
|
||||
span.button.center_open{background-position:-92px -18px}
|
||||
span.button.center_close{background-position:-74px -18px}
|
||||
span.button.bottom_open{background-position:-92px -36px}
|
||||
span.button.bottom_close{background-position:-74px -36px}
|
||||
|
||||
span.button.center_docu{background-position:-56px -18px}
|
||||
span.button.bottom_docu{background-position:-56px -36px}
|
||||
|
||||
span.button.chk {
|
||||
width: 13px; height: 13px;
|
||||
margin: 0 3px 0 0;
|
||||
cursor: auto;
|
||||
}
|
||||
span.button.chk.checkbox_false_full {background-position:0 0}
|
||||
span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
|
||||
span.button.chk.checkbox_false_part {background-position:0 -28px}
|
||||
span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
|
||||
span.button.chk.checkbox_false_disable {background-position:0 -56px}
|
||||
span.button.chk.checkbox_true_full {background-position:-14px 0}
|
||||
span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
|
||||
span.button.chk.checkbox_true_part {background-position:-14px -28px}
|
||||
span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
|
||||
span.button.chk.checkbox_true_disable {background-position:-14px -56px}
|
||||
}
|
||||
|
||||
&-selected{
|
||||
background-color:#FFE6B0;
|
||||
border:1px #FFB951 solid; opacity:0.8;
|
||||
}
|
||||
|
||||
&-treenode-switcher {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
&-icon__open {
|
||||
margin-right: 2px;
|
||||
background-position: -110px -16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
&-icon__close {
|
||||
margin-right: 2px;
|
||||
background-position: -110px 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
&-switcher__open {
|
||||
//background-position: -92px 0;
|
||||
}
|
||||
&-switcher__close {
|
||||
//background-position: -74px 0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user