diff --git a/components/style/themes/default.less b/components/style/themes/default.less index f4e489572a..1bf14f6d36 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -265,6 +265,10 @@ @rate-star-color: #f5a623; @rate-star-bg: #e9e9e9; +// Tree +// --- +@tree-icon-color: #999; + // Card // --- @card-head-height: 48px; diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index 36aac04122..ae8c09ab74 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -77,17 +77,13 @@ &.@{select-tree-prefix-cls}-center_open, &.@{select-tree-prefix-cls}-bottom_open, &.@{select-tree-prefix-cls}-noline_open { - .antTreeSwitcherIcon(); + .antTreeSwitcherIcon("open"); } &.@{select-tree-prefix-cls}-roots_close, &.@{select-tree-prefix-cls}-center_close, &.@{select-tree-prefix-cls}-bottom_close, &.@{select-tree-prefix-cls}-noline_close { - .antTreeSwitcherIcon(); - .ie-rotate(3); - &:after { - transform: rotate(270deg) scale(0.5); - } + .antTreeSwitcherIcon("close"); } } } diff --git a/components/tree/demo/customized-icon.md b/components/tree/demo/customized-icon.md new file mode 100644 index 0000000000..5a89170949 --- /dev/null +++ b/components/tree/demo/customized-icon.md @@ -0,0 +1,90 @@ +--- +order: 6 +title: + zh-CN: 自定义图标 + en-US: Customize Icon +--- + +## zh-CN + +可以针对不同节点采用样式覆盖的方式定制图标。 + +## en-US + +You can customize icons for different nodes by styles override. + +````jsx +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; + +class Demo extends React.Component { + onSelect = (selectedKeys, info) => { + console.log('selected', selectedKeys, info); + } + render() { + return ( + + + + + + + + + + + + + ); + } +} + +ReactDOM.render(, 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; + font-size: 8px \9; + transform: scale(0.66666667) rotate(0deg); + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"; + zoom: 1; + display: inline-block; + font-family: 'anticon'; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: bold; + color: #999; + transition: transform .3s ease; + margin-top: 2px; +} +#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; +} +``` diff --git a/components/tree/demo/line.md b/components/tree/demo/line.md new file mode 100644 index 0000000000..1281039e69 --- /dev/null +++ b/components/tree/demo/line.md @@ -0,0 +1,51 @@ +--- +order: 5 +title: + zh-CN: 连接线 + en-US: Tree With Line +--- + +## zh-CN + +带连接线的树。 + +## en-US + +Tree With Line + +````jsx +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; + +class Demo extends React.Component { + onSelect = (selectedKeys, info) => { + console.log('selected', selectedKeys, info); + } + render() { + return ( + + + + + + + + + + + + + + + + + ); + } +} + +ReactDOM.render(, mountNode); +```` diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index d099c7bcbb..f3e2c813b8 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -38,6 +38,8 @@ Directory, organization, biological classification, country, and etc. Almost thi |onDragLeave | Defines a function will be called when the onDragLeave event occurs | function({event, node}) | - | |onDragEnd | Defines a function will be called when the onDragEnd event occurs | function({event, node}) | - | |onDrop | Defines a function will be called when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - | +|showLine | Whether show connecting line | boolean | false | +|showIcon | Whether show the icon before TreeNode title, which has no default style, you must set custom style for it if set to true | boolean | false | ### TreeNode props diff --git a/components/tree/index.tsx b/components/tree/index.tsx index cb25766ea4..29de396184 100644 --- a/components/tree/index.tsx +++ b/components/tree/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import RcTree, { TreeNode } from 'rc-tree'; import animation from '../_util/openAnimation'; +import classNames from 'classnames'; export interface AntTreeNodeProps { disabled?: boolean; @@ -96,11 +97,16 @@ export default class Tree extends React.Component { render() { const props = this.props; + const { prefixCls, className, showLine } = props; let checkable = props.checkable; + const classString = classNames({ + [`${prefixCls}-show-line`]: !!showLine, + }, className); return ( ) : checkable } + className={classString} + checkable={checkable ? () : checkable } > {this.props.children} diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index d4c948f51e..c5d575e1ab 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -39,6 +39,8 @@ subtitle: 树形控件 |onDragLeave | dragleave 触发时调用 | function({event, node}) | - | |onDragEnd | dragend 触发时调用 | function({event, node}) | - | |onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - | +|showLine | 是否展示连接线 | boolean | false | +|showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | ### TreeNode props diff --git a/components/tree/style/index.less b/components/tree/style/index.less index c601b2b216..c32ffea07e 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -21,7 +21,7 @@ user-select: none; border-top: 2px transparent solid; border-bottom: 2px transparent solid; - + margin-top: -2px; /* Required to make elements draggable in old WebKit */ -khtml-user-drag: element; -webkit-user-drag: element; @@ -96,23 +96,27 @@ } &.@{tree-prefix-cls}-switcher { &.@{tree-prefix-cls}-switcher-noop { - cursor: auto; + cursor: default; } &.@{tree-prefix-cls}-roots_open, &.@{tree-prefix-cls}-center_open, &.@{tree-prefix-cls}-bottom_open, &.@{tree-prefix-cls}-noline_open { - .antTreeSwitcherIcon(); + .antTreeSwitcherIcon("open"); } &.@{tree-prefix-cls}-roots_close, &.@{tree-prefix-cls}-center_close, &.@{tree-prefix-cls}-bottom_close, &.@{tree-prefix-cls}-noline_close { - .antTreeSwitcherIcon(); - .ie-rotate(3); - &:after { - transform: rotate(270deg) scale(0.6); - } + .antTreeSwitcherIcon("close"); + } + } + } + &:last-child > span { + &.@{tree-prefix-cls}-switcher, + &.@{tree-prefix-cls}-iconEle { + &:before { + display: none; } } } @@ -147,4 +151,27 @@ margin-right: 2px; vertical-align: top; } + // Tree with line + &&-show-line { + li { + position: relative; + span { + &.@{tree-prefix-cls}-switcher { + background: @component-background; + &.@{tree-prefix-cls}-switcher-noop { + .antTreeSwitcherIcon("doc"); + } + } + } + } + li:not(:last-child):before { + content: ' '; + width: 1px; + border-left: 1px solid @border-color-base; + height: 100%; + position: absolute; + left: 6px; + margin: 16px 0; + } + } } diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less index 96d5f9ce60..3b342f69ca 100644 --- a/components/tree/style/mixin.less +++ b/components/tree/style/mixin.less @@ -1,16 +1,16 @@ @import "../../style/mixins/index"; -.antTreeSwitcherIcon() { - position: relative; +@open: "\e621"; +@close: "\e645"; +@doc: "\e664"; + +.antTreeSwitcherIcon(@type) { &:after { - .iconfont-size-under-12px(7px); + .iconfont-size-under-12px(8px); display: inline-block; - .iconfont-font("\e606"); + .iconfont-font(@@type); font-weight: bold; - position: absolute; - top: 0; - right: 4px; - color: @text-color; + color: @tree-icon-color; transition: transform .3s ease; } }