mirror of https://github.com/ElemeFE/element
Tag: add chalk theme
Leopoldthecoder
杨奕
parent
34dc51bb8b
commit
f01df258f4
|
|
@ -4,11 +4,10 @@
|
|||
return {
|
||||
tags: [
|
||||
{ name: 'Tag 1', type: '' },
|
||||
{ name: 'Tag 2', type: 'gray' },
|
||||
{ name: 'Tag 3', type: 'primary' },
|
||||
{ name: 'Tag 4', type: 'success' },
|
||||
{ name: 'Tag 5', type: 'warning' },
|
||||
{ name: 'Tag 6', type: 'danger' }
|
||||
{ name: 'Tag 2', type: 'success' },
|
||||
{ name: 'Tag 3', type: 'info' },
|
||||
{ name: 'Tag 4', type: 'warning' },
|
||||
{ name: 'Tag 5', type: 'danger' }
|
||||
],
|
||||
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
|
||||
inputVisible: false,
|
||||
|
|
@ -46,17 +45,17 @@
|
|||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
padding: 0 *;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 78px;
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
|
||||
.el-input__inner {
|
||||
height: 24px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -72,11 +71,10 @@ Used for marking and selection.
|
|||
|
||||
```html
|
||||
<el-tag>Tag One</el-tag>
|
||||
<el-tag type="gray">Tag Two</el-tag>
|
||||
<el-tag type="primary">Tag Three</el-tag>
|
||||
<el-tag type="success">Tag Four</el-tag>
|
||||
<el-tag type="warning">Tag Five</el-tag>
|
||||
<el-tag type="danger">Tag Six</el-tag>
|
||||
<el-tag type="success">Tag Two</el-tag>
|
||||
<el-tag type="info">Tag Three</el-tag>
|
||||
<el-tag type="warning">Tag Four</el-tag>
|
||||
<el-tag type="danger">Tag Five</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -88,9 +86,8 @@ Used for marking and selection.
|
|||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag.name"
|
||||
:closable="true"
|
||||
:type="tag.type"
|
||||
>
|
||||
closable
|
||||
:type="tag.type">
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
|
||||
|
|
@ -100,11 +97,10 @@ Used for marking and selection.
|
|||
return {
|
||||
tags: [
|
||||
{ name: 'Tag 1', type: '' },
|
||||
{ name: 'Tag 2', type: 'gray' },
|
||||
{ name: 'Tag 3', type: 'primary' },
|
||||
{ name: 'Tag 4', type: 'success' },
|
||||
{ name: 'Tag 5', type: 'warning' },
|
||||
{ name: 'Tag 6', type: 'danger' }
|
||||
{ name: 'Tag 2', type: 'success' },
|
||||
{ name: 'Tag 3', type: 'info' },
|
||||
{ name: 'Tag 4', type: 'warning' },
|
||||
{ name: 'Tag 5', type: 'danger' }
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -122,10 +118,9 @@ You can use the `close` event to add and remove tag dynamically.
|
|||
<el-tag
|
||||
:key="tag"
|
||||
v-for="tag in dynamicTags"
|
||||
:closable="true"
|
||||
closable
|
||||
:close-transition="false"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
@close="handleClose(tag)">
|
||||
{{tag}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
|
|
@ -139,6 +134,28 @@ You can use the `close` event to add and remove tag dynamically.
|
|||
>
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
|
||||
|
||||
<style>
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -177,14 +194,14 @@ You can use the `close` event to add and remove tag dynamically.
|
|||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | theme | string | primary/gray/success/warning/danger | — |
|
||||
| closable | whether Tab can be removed | boolean | — | false |
|
||||
| type | theme | string | success/info/warning/danger | — |
|
||||
| closable | whether Tag can be removed | boolean | — | false |
|
||||
| close-transition | whether to disable animations | boolean | — | false |
|
||||
| hit | whether Tag has a highlighted border | boolean | — | false |
|
||||
| color | background color of the tag | string | — | — |
|
||||
| color | background color of the Tag | string | — | — |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| close | triggers when Tab is removed | — |
|
||||
| close | triggers when Tag is removed | — |
|
||||
|
|
@ -4,11 +4,10 @@
|
|||
return {
|
||||
tags: [
|
||||
{ name: '标签一', type: '' },
|
||||
{ name: '标签二', type: 'gray' },
|
||||
{ name: '标签三', type: 'primary' },
|
||||
{ name: '标签四', type: 'success' },
|
||||
{ name: '标签五', type: 'warning' },
|
||||
{ name: '标签六', type: 'danger' }
|
||||
{ name: '标签二', type: 'success' },
|
||||
{ name: '标签三', type: 'info' },
|
||||
{ name: '标签四', type: 'warning' },
|
||||
{ name: '标签五', type: 'danger' }
|
||||
],
|
||||
dynamicTags: ['标签一', '标签二', '标签三'],
|
||||
inputVisible: false,
|
||||
|
|
@ -46,17 +45,17 @@
|
|||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
padding: 0 *;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 78px;
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
|
||||
.el-input__inner {
|
||||
height: 24px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -72,11 +71,10 @@
|
|||
|
||||
```html
|
||||
<el-tag>标签一</el-tag>
|
||||
<el-tag type="gray">标签二</el-tag>
|
||||
<el-tag type="primary">标签三</el-tag>
|
||||
<el-tag type="success">标签四</el-tag>
|
||||
<el-tag type="warning">标签五</el-tag>
|
||||
<el-tag type="danger">标签六</el-tag>
|
||||
<el-tag type="success">标签二</el-tag>
|
||||
<el-tag type="info">标签三</el-tag>
|
||||
<el-tag type="warning">标签四</el-tag>
|
||||
<el-tag type="danger">标签五</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -88,9 +86,8 @@
|
|||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag.name"
|
||||
:closable="true"
|
||||
:type="tag.type"
|
||||
>
|
||||
closable
|
||||
:type="tag.type">
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
|
||||
|
|
@ -100,11 +97,10 @@
|
|||
return {
|
||||
tags: [
|
||||
{ name: '标签一', type: '' },
|
||||
{ name: '标签二', type: 'gray' },
|
||||
{ name: '标签三', type: 'primary' },
|
||||
{ name: '标签四', type: 'success' },
|
||||
{ name: '标签五', type: 'warning' },
|
||||
{ name: '标签六', type: 'danger' }
|
||||
{ name: '标签二', type: 'success' },
|
||||
{ name: '标签三', type: 'info' },
|
||||
{ name: '标签四', type: 'warning' },
|
||||
{ name: '标签五', type: 'danger' }
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -122,10 +118,9 @@
|
|||
<el-tag
|
||||
:key="tag"
|
||||
v-for="tag in dynamicTags"
|
||||
:closable="true"
|
||||
closable
|
||||
:close-transition="false"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
@close="handleClose(tag)">
|
||||
{{tag}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
|
|
@ -139,6 +134,28 @@
|
|||
>
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
|
||||
|
||||
<style>
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -177,7 +194,7 @@
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | 主题 | string | primary/gray/success/warning/danger | — |
|
||||
| type | 主题 | string | success/info/warning/danger | — |
|
||||
| closable | 是否可关闭 | boolean | — | false |
|
||||
| close-transition | 是否禁用渐变动画 | boolean | — | false |
|
||||
| hit | 是否有边框描边 | boolean | — | false |
|
||||
|
|
@ -187,4 +204,4 @@
|
|||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| close | 关闭tag时触发的事件 | — |
|
||||
| close | 关闭 Tag 时触发的事件 | — |
|
||||
|
|
|
|||
|
|
@ -506,31 +506,31 @@ $--tooltip-padding: 10px;
|
|||
|
||||
/* Tag
|
||||
-------------------------- */
|
||||
$--tag-padding: 0 5px;
|
||||
$--tag-fill: $--border-color-hover;
|
||||
$--tag-color: $--color-white;
|
||||
$--tag-close-color: #666;
|
||||
$--tag-padding: 0 10px;
|
||||
$--tag-fill: rgba($--color-primary, 0.10);
|
||||
$--tag-color: $--color-primary;
|
||||
$--tag-border: rgba($--color-primary, 0.20);
|
||||
$--tag-font-size: 12px;
|
||||
$--tag-border-radius: 4px;
|
||||
|
||||
$--tag-gray-fill: $--color-text-secondary;
|
||||
$--tag-gray-border: $--color-text-secondary;
|
||||
$--tag-gray-color: $--link-color;
|
||||
$--tag-info-fill: rgba($--color-info, 0.10);
|
||||
$--tag-info-border: rgba($--color-info, 0.20);
|
||||
$--tag-info-color: $--color-info;
|
||||
|
||||
$--tag-primary-fill: rgba($--color-primary, 0.10);
|
||||
$--tag-primary-border: rgba($--color-primary, 0.20);
|
||||
$--tag-primary-color: $--color-primary;
|
||||
|
||||
$--tag-success-fill: rgba(18,206,102,0.10);
|
||||
$--tag-success-border: rgba(18,206,102,0.20);
|
||||
$--tag-success-fill: rgba($--color-success, 0.10);
|
||||
$--tag-success-border: rgba($--color-success, 0.20);
|
||||
$--tag-success-color: $--color-success;
|
||||
|
||||
$--tag-warning-fill: rgba(247,186,41,0.10);
|
||||
$--tag-warning-border: rgba(247,186,41,0.20);
|
||||
$--tag-warning-fill: rgba($--color-warning, 0.10);
|
||||
$--tag-warning-border: rgba($--color-warning, 0.20);
|
||||
$--tag-warning-color: $--color-warning;
|
||||
|
||||
$--tag-danger-fill: rgba(255,73,73,0.10);
|
||||
$--tag-danger-border: rgba(255,73,73,0.20);
|
||||
$--tag-danger-fill: rgba($--color-danger, 0.10);
|
||||
$--tag-danger-border: rgba($--color-danger, 0.20);
|
||||
$--tag-danger-color: $--color-danger;
|
||||
|
||||
/* Tree
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
background-color: $--tag-fill;
|
||||
display: inline-block;
|
||||
padding: $--tag-padding;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
font-size: $--tag-font-size;
|
||||
color: $--tag-color;
|
||||
border-radius: $--tag-border-radius;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
border: 1px solid $--tag-border;
|
||||
white-space: nowrap;
|
||||
|
||||
& .el-icon-close {
|
||||
|
|
@ -27,36 +27,28 @@
|
|||
vertical-align: middle;
|
||||
top: -1px;
|
||||
right: -2px;
|
||||
color: $--tag-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-white;
|
||||
color: $--tag-fill;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(gray) {
|
||||
background-color: $--tag-gray-fill;
|
||||
border-color: $--tag-gray-border;
|
||||
color: $--tag-gray-color;
|
||||
@include when(hit) {
|
||||
border-color: $--tag-gray-color;
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: $--tag-gray-color;
|
||||
background-color: $--tag-color;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
@include m(primary) {
|
||||
background-color: $--tag-primary-fill;
|
||||
border-color: $--tag-primary-border;
|
||||
color: $--tag-primary-color;
|
||||
|
||||
@include m(info) {
|
||||
background-color: $--tag-info-fill;
|
||||
border-color: $--tag-info-border;
|
||||
color: $--tag-info-color;
|
||||
@include when(hit) {
|
||||
border-color: $--tag-primary-color;
|
||||
border-color: $--tag-info-color;
|
||||
}
|
||||
|
||||
& .el-tag__close {
|
||||
color: $--tag-info-color;
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: $--tag-primary-color;
|
||||
background-color: $--tag-info-color;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
|
@ -68,6 +60,10 @@
|
|||
border-color: $--tag-success-color;
|
||||
}
|
||||
|
||||
& .el-tag__close {
|
||||
color: $--tag-success-color;
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: $--tag-success-color;
|
||||
color: $--color-white;
|
||||
|
|
@ -81,6 +77,10 @@
|
|||
border-color: $--tag-warning-color;
|
||||
}
|
||||
|
||||
& .el-tag__close {
|
||||
color: $--tag-warning-color;
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: $--tag-warning-color;
|
||||
color: $--color-white;
|
||||
|
|
@ -94,6 +94,10 @@
|
|||
border-color: $--tag-danger-color;
|
||||
}
|
||||
|
||||
& .el-tag__close {
|
||||
color: $--tag-danger-color;
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: $--tag-danger-color;
|
||||
color: $--color-white;
|
||||
|
|
|
|||
Loading…
Reference in New Issue