From 817e5ff72a2ebf8fe699420bc6f3ba00f98ecf8a Mon Sep 17 00:00:00 2001 From: ioldfish Date: Thu, 6 Aug 2015 09:17:40 +0800 Subject: [PATCH] upadte tree style --- components/tree/demo/basic.md | 12 +++++++++--- components/tree/demo/checkbox.md | 32 ++++++++++++++++++++++++++++++++ components/tree/index.jsx | 1 - components/tree/index.md | 9 +++++++++ package.json | 2 +- style/components/tree.less | 26 ++++++++++++++------------ 6 files changed, 65 insertions(+), 17 deletions(-) create mode 100644 components/tree/demo/checkbox.md diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index 6230a151d0..5f36be08ed 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -9,9 +9,15 @@ ````jsx var Tree = antd.Tree; var TreeNode = Tree.TreeNode; +function handleSelect(selected, c) { + console.log('selected: ', selected, c ); +} +function handleChecked(checked, c) { + console.log('checked: ', checked, c ); +} React.render( - - + + leaf @@ -26,7 +32,7 @@ React.render( leaf - + , document.getElementById('components-tree-demo-basic')); ```` diff --git a/components/tree/demo/checkbox.md b/components/tree/demo/checkbox.md new file mode 100644 index 0000000000..ebfe757edb --- /dev/null +++ b/components/tree/demo/checkbox.md @@ -0,0 +1,32 @@ +# 基本 + +- order: 1 + +提供复选框操作功能。 + +--- + +````jsx +var Tree = antd.Tree; +var TreeNode = Tree.TreeNode; +React.render( + + + leaf + + + leaf + leaf + + leaf + leaf + + + leaf + + leaf + + +, document.getElementById('components-tree-demo-checkbox')); +```` + diff --git a/components/tree/index.jsx b/components/tree/index.jsx index fd2b5a97de..a90d9afd55 100644 --- a/components/tree/index.jsx +++ b/components/tree/index.jsx @@ -8,7 +8,6 @@ var antDTree = React.createClass({ prefixCls: 'ant-tree' }; }, - render() { return {this.props.children} diff --git a/components/tree/index.md b/components/tree/index.md index 5853657c38..e15d291eff 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -5,4 +5,13 @@ --- +## 何时使用 +简单的树形菜单应用，暂不支持键盘操作。 + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------------------------------------|------------|--------| +| checkable | whether support checked | bool | false | +| expandAll | expand all treeNodes | bool | false | \ No newline at end of file diff --git a/package.json b/package.json index f912ded94e..c87105e40b 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "rc-table": "~3.1.0", "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0", - "rc-tree": "~0.10.0", + "rc-tree": "~0.12.1", "rc-util": "~2.0.3", "react-slick": "~0.6.4" }, diff --git a/style/components/tree.less b/style/components/tree.less index a0393182ee..70f8acceca 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -1,4 +1,4 @@ -@treePrefixCls: rc-tree; +@treePrefixCls: ant-tree; .@{treePrefixCls} { margin:0; padding:5px; @@ -30,7 +30,7 @@ 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"); + background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png"); } span.button.roots_open { background-position: -92px 0; } span.button.roots_close{background-position:-74px 0} @@ -38,31 +38,33 @@ 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.noline_open{background-position:-92px -72px} + span.button.noline_close{background-position:-74px -72px} span.button.chk { - width: 13px; height: 13px; - margin: 0 3px 0 0; + width: 15px; height: 16px; + // margin: 0 3px 0 0; + margin: 3px 5px 0 3px; cursor: auto; } span.button.chk.checkbox_false_full {background-position:0 0} + span.button.chk.checkbox_false_full:hover {background-position:0 -15px} 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 {background-position:-15px 0} + span.button.chk.checkbox_true_full:hover {background-position:-15px -15px} 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 {background-position:-14px -30px} span.button.chk.checkbox_true_part_focus {background-position:-14px -42px} span.button.chk.checkbox_true_disable {background-position:-14px -56px} } - &-selected{ + /*&-selected{ background-color:#FFE6B0; border:1px #FFB951 solid; opacity:0.8; - } + }*/ &-treenode-switcher { display: inline-block; @@ -85,4 +87,4 @@ &-switcher__close { //background-position: -74px 0; } -} +} \ No newline at end of file