test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-01 19:57:48 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tree: add chalk theme (#6901)

Browse Source 
* Playground: bump to new theme

* Tree: update chalk theme

* update doc

* Update var.scss
This commit is contained in:
Dreamacro 2017-09-14 11:34:26 +08:00 committed by 杨奕
parent e62f8c1414
commit 5e8dfd0738
6 changed files with 36 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/docs/en-US/tree.md
View File

@ -248,13 +248,13 @@
renderContent(h, { node, data, store }) {
return (
<span style="white-space: normal">
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
},
@ -764,13 +764,13 @@ The content of tree nodes can be customized, so you can add icons or buttons as
renderContent(h, { node, data, store }) {
return (
<span style="white-space: normal">
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
}

16
examples/docs/zh-CN/tree.md
View File

@ -248,13 +248,13 @@
renderContent(h, { node, data, store }) {
return (
<span style="white-space: normal">
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
},
@ -763,13 +763,13 @@
renderContent(h, { node, data, store }) {
return (
<span style="white-space: normal">
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
}

2
examples/play.js
View File

@ -1,7 +1,7 @@
import Vue from 'vue';
import Element from 'main/index.js';
import App from './play/index.vue';
import 'packages/theme-default/src/index.css';
import 'packages/theme-chalk/src/index.scss';
Vue.use(Element);

6
packages/theme-chalk/src/common/var.scss
View File

@ -533,6 +533,12 @@ $--tag-danger-fill: rgba(255,73,73,0.10);
$--tag-danger-border: rgba(255,73,73,0.20);
$--tag-danger-color: $--color-danger;
/* Tree
-------------------------- */
$--tree-node-hover-color: $--background-color-base;
$--tree-text-color: $--color-text-regular;
$--tree-expand-icon-color: $--color-text-placeholder;
/* Dropdown
-------------------------- */
$--dropdown-menu-box-shadow: $--box-shadow-light;

34
packages/theme-chalk/src/tree.scss
View File

@ -4,7 +4,7 @@
@include b(tree) {
cursor: default;
background: $--color-white;
border: 1px solid $--color-black;
color: $--tree-text-color;
@include e(empty-block) {
position: relative;
@ -27,41 +27,35 @@
white-space: nowrap;
@include e(content) {
line-height: 36px;
height: 36px;
display: flex;
align-items: center;
height: 26px;
cursor: pointer;
& > .el-checkbox,
& > .el-tree-node__expand-icon {
margin-right: 8px;
margin: 0 8px;
}
& > .el-checkbox {
vertical-align: middle;
margin-right: 8px;
}
&:hover {
background: $--color-black;
background-color: $--tree-node-hover-color;
}
}
@include e(expand-icon) {
display: inline-block;
cursor: pointer;
width: 0;
height: 0;
vertical-align: middle;
margin-left: 10px;
border: 6px solid transparent;
border: 3.5px solid transparent;
border-right-width: 0;
border-left-color: $--color-black;
border-left-width: 7px;
border-left-color: $--tree-expand-icon-color;
border-left-width: 6px;
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
&:hover {
border-left-color: #999;
}
&.expanded {
transform: rotate(90deg);
}
@ -74,16 +68,12 @@
@include e(label) {
font-size: $--font-size-base;
vertical-align: middle;
display: inline-block;
}
@include e(loading-icon) {
display: inline-block;
vertical-align: middle;
margin-right: 4px;
margin-right: 8px;
font-size: $--font-size-base;
color: $--color-black;
color: $--tree-expand-icon-color;
}
& > .el-tree-node__children {

2
packages/tree/src/tree.vue
View File

@ -88,7 +88,7 @@
accordion: Boolean,
indent: {
type: Number,
default: 16
default: 18
}
},