mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 23:46:28 +08:00
feat: Tree with line & Tree customize icon demo (#5261)
* Tree with line & Tree customize icon demo * improve
This commit is contained in:
ddcat1115
Benjy Cui
parent
4c8297d39d
commit
27b099e58e
@ -265,6 +265,10 @@
|
||||
@rate-star-color: #f5a623;
|
||||
@rate-star-bg: #e9e9e9;
|
||||
|
||||
// Tree
|
||||
// ---
|
||||
@tree-icon-color: #999;
|
||||
|
||||
// Card
|
||||
// ---
|
||||
@card-head-height: 48px;
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
90
components/tree/demo/customized-icon.md
Normal file
90
components/tree/demo/customized-icon.md
Normal file
@ -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 (
|
||||
<Tree
|
||||
showIcon
|
||||
showLine
|
||||
defaultExpandedKeys={['0-0-0', '0-0-1']}
|
||||
defaultSelectedKeys={['0-0-0', '0-0-1']}
|
||||
onSelect={this.onSelect}
|
||||
>
|
||||
<TreeNode title="parent 1" key="0-0">
|
||||
<TreeNode title="parent 1-0" key="0-0-0">
|
||||
<TreeNode title="leaf" key="0-0-0-0" />
|
||||
<TreeNode title="leaf" key="0-0-0-1" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-1" key="0-0-1">
|
||||
<TreeNode title="leaf" key="0-0-1-0" />
|
||||
</TreeNode>
|
||||
<TreeNode title="leaf" key="0-0-2" />
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Demo />, 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;
|
||||
}
|
||||
```
|
||||
51
components/tree/demo/line.md
Normal file
51
components/tree/demo/line.md
Normal file
@ -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 (
|
||||
<Tree
|
||||
showLine
|
||||
defaultExpandedKeys={['0-0-0']}
|
||||
onSelect={this.onSelect}
|
||||
>
|
||||
<TreeNode title="parent 1" key="0-0">
|
||||
<TreeNode title="parent 1-0" key="0-0-0">
|
||||
<TreeNode title="leaf" key="0-0-0-0" />
|
||||
<TreeNode title="leaf" key="0-0-0-1" />
|
||||
<TreeNode title="leaf" key="0-0-0-2" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-1" key="0-0-1">
|
||||
<TreeNode title="leaf" key="0-0-1-0" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-2" key="0-0-2">
|
||||
<TreeNode title="leaf" key="0-0-2-0" />
|
||||
<TreeNode title="leaf" key="0-0-2-1" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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<TreeProps, any> {
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const { prefixCls, className, showLine } = props;
|
||||
let checkable = props.checkable;
|
||||
const classString = classNames({
|
||||
[`${prefixCls}-show-line`]: !!showLine,
|
||||
}, className);
|
||||
return (
|
||||
<RcTree
|
||||
{...props}
|
||||
checkable={checkable ? (<span className={`${props.prefixCls}-checkbox-inner`} />) : checkable }
|
||||
className={classString}
|
||||
checkable={checkable ? (<span className={`${prefixCls}-checkbox-inner`} />) : checkable }
|
||||
>
|
||||
{this.props.children}
|
||||
</RcTree>
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user