Skip to content

E
Element
Commit f01df258 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕
Browse files
Options

Tag: add chalk theme

parent 34dc51bb
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 97 deletions
examples/docs/en-US/tag.md
View file @ f01df258
......@@ -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,10 +86,9 @@ Used for marking and selection.
<el-tag
v-for="tag in tags"
:key="tag.name"
:closable="true"
:type="tag.type"
>
{{tag.name}}
closable
:type="tag.type">
{{tag.name}}
</el-tag>
<script>
......@@ -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,11 +118,10 @@ 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)"
>
{{tag}}
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
......@@ -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 | — |
\ No newline at end of file
| close | triggers when Tag is removed | — |
\ No newline at end of file
examples/docs/zh-CN/tag.md
View file @ f01df258
......@@ -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,10 +86,9 @@
<el-tag
v-for="tag in tags"
:key="tag.name"
:closable="true"
:type="tag.type"
>
{{tag.name}}
closable
:type="tag.type">
{{tag.name}}
</el-tag>
<script>
......@@ -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,11 +118,10 @@
<el-tag
:key="tag"
v-for="tag in dynamicTags"
:closable="true"
closable
:close-transition="false"
@close="handleClose(tag)"
>
{{tag}}
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
......@@ -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 时触发的事件 | — |
packages/theme-chalk/src/common/var.scss
View file @ f01df258
......@@ -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-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
......
packages/theme-chalk/src/tag.scss
View file @ f01df258
......@@ -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;
background-color: $--tag-color;
color: $--color-white;
}
}
@include m(gray) {
background-color: $--tag-gray-fill;
border-color: $--tag-gray-border;
color: $--tag-gray-color;
@include m(info) {
background-color: $--tag-info-fill;
border-color: $--tag-info-border;
color: $--tag-info-color;
@include when(hit) {
border-color: $--tag-gray-color;
border-color: $--tag-info-color;
}
& .el-tag__close:hover {
background-color: $--tag-gray-color;
color: $--color-white;
}
}
@include m(primary) {
background-color: $--tag-primary-fill;
border-color: $--tag-primary-border;
color: $--tag-primary-color;
@include when(hit) {
border-color: $--tag-primary-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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment