Skip to content

E
Element
Commit cefd2356 authored by Simona's avatar Simona Committed by luckyCao
Browse files
Options

feat(Tag): add prop effect. (#15725)

parent d0debda7
Hide whitespace changes
Inline Side-by-side
Showing with 352 additions and 120 deletions
examples/demo-styles/tag.scss
View file @ cefd2356
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
.el-tag + .el-tag { .el-tag + .el-tag {
margin-left: 10px; margin-left: 10px;
} }
.button-new-tag { .button-new-tag {
margin-left: 10px; margin-left: 10px;
height: 32px; height: 32px;
...@@ -9,9 +10,25 @@ ...@@ -9,9 +10,25 @@
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.input-new-tag { .input-new-tag {
width: 90px; width: 90px;
margin-left: 10px; margin-left: 10px;
vertical-align: bottom; vertical-align: bottom;
} }
.tag-group {
display: flex;
align-items: center;
&__title {
width: 45px;
font-size: 14px;
color: #606266;
}
&+.tag-group {
margin-top: 10px;
}
}
} }
examples/docs/en-US/tag.md
View file @ cefd2356
...@@ -7,11 +7,11 @@ Used for marking and selection. ...@@ -7,11 +7,11 @@ Used for marking and selection.
:::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag. :::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
```html ```html
<el-tag>Tag One</el-tag> <el-tag>Tag 1</el-tag>
<el-tag type="success">Tag Two</el-tag> <el-tag type="success">Tag 2</el-tag>
<el-tag type="info">Tag Three</el-tag> <el-tag type="info">Tag 3</el-tag>
<el-tag type="warning">Tag Four</el-tag> <el-tag type="warning">Tag 4</el-tag>
<el-tag type="danger">Tag Five</el-tag> <el-tag type="danger">Tag 5</el-tag>
``` ```
::: :::
...@@ -139,19 +139,66 @@ Besides default size, Tag component provides three additional sizes for you to c ...@@ -139,19 +139,66 @@ Besides default size, Tag component provides three additional sizes for you to c
``` ```
::: :::
### Theme
Tag provide three different themes: `dark`、`light` and `plain`
:::demo Using `effect` to change, default is `light`
```html
<div class="tag-group">
<span class="tag-group__title">Dark</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="dark">
{{ item.label }}
</el-tag>
</div>
<div class="tag-group">
<span class="tag-group__title">Plain</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="plain">
{{ item.label }}
</el-tag>
</div>
<script>
export default {
data() {
return {
items: [
{ type: '', label: 'Tag 1' },
{ type: 'success', label: 'Tag 2' },
{ type: 'info', label: 'Tag 3' },
{ type: 'danger', label: 'Tag 4' },
{ type: 'warning', label: 'Tag 5' }
]
}
}
}
</script>
```
:::
### Attributes ### Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| type | theme | string | success/info/warning/danger | — | | type | component type | string | success/info/warning/danger | — |
| closable | whether Tag can be removed | boolean | — | false | | closable | whether Tag can be removed | boolean | — | false |
| disable-transitions | whether to disable animations | boolean | — | false | | disable-transitions | whether to disable animations | boolean | — | false |
| hit | whether Tag has a highlighted border | 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 | — | — |
| size | tag size | string | medium / small / mini | — | | size | tag size | string | medium / small / mini | — |
| effect | component theme | string | dark / light / plain | light |
### Events ### Events
| Event Name | Description | Parameters | | Event Name | Description | Parameters |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| click | triggers when Tag is clicked | — | | click | triggers when Tag is clicked | — |
| close | triggers when Tag is removed | — | | close | triggers when Tag is removed | — |
\ No newline at end of file
examples/docs/es/tag.md
View file @ cefd2356
...@@ -7,11 +7,11 @@ Se utiliza para marcar y seleccionar. ...@@ -7,11 +7,11 @@ Se utiliza para marcar y seleccionar.
:::demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta. :::demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
```html ```html
<el-tag>Tag One</el-tag> <el-tag>Tag 1</el-tag>
<el-tag type="success">Tag Two</el-tag> <el-tag type="success">Tag 2</el-tag>
<el-tag type="info">Tag Three</el-tag> <el-tag type="info">Tag 3</el-tag>
<el-tag type="warning">Tag Four</el-tag> <el-tag type="warning">Tag 4</el-tag>
<el-tag type="danger">Tag Five</el-tag> <el-tag type="danger">Tag 5</el-tag>
``` ```
::: :::
...@@ -139,19 +139,65 @@ Además del tamaño predeterminado, el componente Tag proporciona tres tamaños ...@@ -139,19 +139,65 @@ Además del tamaño predeterminado, el componente Tag proporciona tres tamaños
``` ```
::: :::
### Theme
Tag provide three different themes: `dark`、`light` and `plain`
:::demo Using `effect` to change, default is `light`
```html
<div class="tag-group">
<span class="tag-group__title">Dark</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="dark">
{{ item.label }}
</el-tag>
</div>
<div class="tag-group">
<span class="tag-group__title">Plain</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="plain">
{{ item.label }}
</el-tag>
</div>
<script>
export default {
data() {
return {
items: [
{ type: '', label: 'Tag 1' },
{ type: 'success', label: 'Tag 2' },
{ type: 'info', label: 'Tag 3' },
{ type: 'danger', label: 'Tag 4' },
{ type: 'warning', label: 'Tag 5' }
]
}
}
}
</script>
```
:::
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- | | ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
| type | tema | string | success/info/warning/danger | — | | type | component type | string | success/info/warning/danger | — |
| closable | si el Tag puede ser removido | boolean | — | false | | closable | si el Tag puede ser removido | boolean | — | false |
| disable-transitions | si se deshabilitan las animaciones | boolean | — | false | | disable-transitions | si se deshabilitan las animaciones | boolean | — | false |
| hit | si el Tag tiene un borde resaltado | boolean | — | false | | hit | si el Tag tiene un borde resaltado | boolean | — | false |
| color | color de fondo del Tag | string | — | — | | color | color de fondo del Tag | string | — | — |
| size | tamaño del Tag | string | medium / small / mini | — | | size | tamaño del Tag | string | medium / small / mini | — |
| effect | component theme | string | dark / light / plain | light |
### Eventos ### Eventos
| Nombre | Descripción | Parametros | | Nombre | Descripción | Parametros |
| ------ | ------------------------------------ | ---------- | | ------ | ------------------------------------ | ---------- |
| click | se dispara cuando el Tag es clic | — | | click | se dispara cuando el Tag es clic | — |
| close | se dispara cuando el Tag es removido | — | | close | se dispara cuando el Tag es removido | — |
\ No newline at end of file
examples/docs/fr-FR/tag.md
View file @ cefd2356
...@@ -139,6 +139,51 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan ...@@ -139,6 +139,51 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan
``` ```
::: :::
### Theme
Tag provide three different themes: `dark`、`light` and `plain`
:::demo Using `effect` to change, default is `light`
```html
<div class="tag-group">
<span class="tag-group__title">Dark</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="dark">
{{ item.label }}
</el-tag>
</div>
<div class="tag-group">
<span class="tag-group__title">Plain</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="plain">
{{ item.label }}
</el-tag>
</div>
<script>
export default {
data() {
return {
items: [
{ type: '', label: 'Tag 1' },
{ type: 'success', label: 'Tag 2' },
{ type: 'info', label: 'Tag 3' },
{ type: 'danger', label: 'Tag 4' },
{ type: 'warning', label: 'Tag 5' }
]
}
}
}
</script>
```
:::
### Attributs ### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
...@@ -149,6 +194,7 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan ...@@ -149,6 +194,7 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan
| hit | Si le tag à une bordure mise en valeur. | boolean | — | false | | hit | Si le tag à une bordure mise en valeur. | boolean | — | false |
| color | Couleur de fond du tag. | string | — | — | | color | Couleur de fond du tag. | string | — | — |
| size | Taille du tag. | string | medium / small / mini | — | | size | Taille du tag. | string | medium / small / mini | — |
| effect | component theme | string | dark / light / plain | light |
### Évènements ### Évènements
......
examples/docs/zh-CN/tag.md
View file @ cefd2356
...@@ -139,19 +139,65 @@ Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下 ...@@ -139,19 +139,65 @@ Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下
``` ```
::: :::
### 不同主题
Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
:::demo 通过设置`effect`属性来改变主题，默认为 `light`
```html
<div class="tag-group">
<span class="tag-group__title">Dark</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="dark">
{{ item.label }}
</el-tag>
</div>
<div class="tag-group">
<span class="tag-group__title">Plain</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="plain">
{{ item.label }}
</el-tag>
</div>
<script>
export default {
data() {
return {
items: [
{ type: '', label: '标签一' },
{ type: 'success', label: '标签二' },
{ type: 'info', label: '标签三' },
{ type: 'danger', label: '标签四' },
{ type: 'warning', label: '标签五' }
]
}
}
}
</script>
```
:::
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| type | 主题 | string | success/info/warning/danger | — | | type | 类型 | string | success/info/warning/danger | — |
| closable | 是否可关闭 | boolean | — | false | | closable | 是否可关闭 | boolean | — | false |
| disable-transitions | 是否禁用渐变动画 | boolean | — | false | | disable-transitions | 是否禁用渐变动画 | boolean | — | false |
| hit | 是否有边框描边 | boolean | — | false | | hit | 是否有边框描边 | boolean | — | false |
| color | 背景色 | string | — | — | | color | 背景色 | string | — | — |
| size | 尺寸 | string | medium / small / mini | — | | size | 尺寸 | string | medium / small / mini | — |
| effect | 主题 | string | dark / light / plain | light |
### Events ### Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| click | 点击 Tag 时触发的事件 | — | | click | 点击 Tag 时触发的事件 | — |
| close | 关闭 Tag 时触发的事件 | — | | close | 关闭 Tag 时触发的事件 | — |
\ No newline at end of file
packages/tag/src/tag.vue
View file @ cefd2356
...@@ -8,7 +8,14 @@ ...@@ -8,7 +8,14 @@
hit: Boolean, hit: Boolean,
disableTransitions: Boolean, disableTransitions: Boolean,
color: String, color: String,
size: String size: String,
effect: {
type: String,
default: 'light',
validator(val) {
return ['dark', 'light', 'plain'].includes(val);
}
}
}, },
methods: { methods: {
handleClose(event) { handleClose(event) {
...@@ -26,16 +33,25 @@ ...@@ -26,16 +33,25 @@
} }
}, },
render(h) { render(h) {
const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '', const { type, tagSize, hit, effect } = this;
this.tagSize ? `el-tag--${this.tagSize}` : '', const classes = [
{'is-hit': this.hit} 'el-tag',
type ? `el-tag--${type}` : '',
tagSize ? `el-tag--${tagSize}` : '',
effect ? `el-tag--${effect}` : '',
hit && 'is-hit'
]; ];
const tagEl = (<span class={classes} style={{backgroundColor: this.color}} on-click={this.handleClick}> const tagEl = (
{ this.$slots.default } <span
{ class={ classes }
this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i> style={{ backgroundColor: this.color }}
} on-click={ this.handleClick }>
</span>); { this.$slots.default }
{
this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
}
</span>
);
return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>; return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
} }
......
packages/theme-chalk/src/common/var.scss
View file @ cefd2356
...@@ -707,36 +707,20 @@ $--tooltip-padding: 10px !default; ...@@ -707,36 +707,20 @@ $--tooltip-padding: 10px !default;
/* Tag /* Tag
-------------------------- */ -------------------------- */
$--tag-padding: 0 10px !default;
$--tag-fill: rgba($--color-primary, 0.10) !default;
/// color||Color|0
$--tag-font-color: $--color-primary !default;
/// color||Color|0 /// color||Color|0
$--tag-default-hover-background-color: $--color-primary !default;
$--tag-border: rgba($--color-primary, 0.20) !default;
/// fontSize||Font|1
$--tag-font-size: 12px !default;
$--tag-border-radius: 4px !default;
$--tag-info-fill: rgba($--color-info, 0.10) !default;
$--tag-info-border: rgba($--color-info, 0.20) !default;
$--tag-info-color: $--color-info !default; $--tag-info-color: $--color-info !default;
/// color||Color|0
$--tag-primary-fill: rgba($--color-primary, 0.10) !default;
$--tag-primary-border: rgba($--color-primary, 0.20) !default;
$--tag-primary-color: $--color-primary !default; $--tag-primary-color: $--color-primary !default;
/// color||Color|0
$--tag-success-fill: rgba($--color-success, 0.10) !default;
$--tag-success-border: rgba($--color-success, 0.20) !default;
$--tag-success-color: $--color-success !default; $--tag-success-color: $--color-success !default;
/// color||Color|0
$--tag-warning-fill: rgba($--color-warning, 0.10) !default;
$--tag-warning-border: rgba($--color-warning, 0.20) !default;
$--tag-warning-color: $--color-warning !default; $--tag-warning-color: $--color-warning !default;
/// color||Color|0
$--tag-danger-fill: rgba($--color-danger, 0.10) !default;
$--tag-danger-border: rgba($--color-danger, 0.20) !default;
$--tag-danger-color: $--color-danger !default; $--tag-danger-color: $--color-danger !default;
/// fontSize||Font|1
$--tag-font-size: 12px !default;
$--tag-border-radius: 4px !default;
$--tag-padding: 0 10px !default;
/* Tree /* Tree
-------------------------- */ -------------------------- */
......
packages/theme-chalk/src/tag.scss
View file @ cefd2356
@import "mixins/mixins"; @import "mixins/mixins";
@import "common/var"; @import "common/var";
@include b(tag) { @mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) {
background-color: $--tag-fill; background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);
display: inline-block; border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
padding: $--tag-padding; color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
height: 32px;
line-height: 30px;
font-size: $--tag-font-size;
color: $--tag-font-color;
border-radius: $--tag-border-radius;
box-sizing: border-box;
border: 1px solid $--tag-border;
white-space: nowrap;
.el-icon-close {
border-radius: 50%;
text-align: center;
position: relative;
cursor: pointer;
font-size: 12px;
height: 16px;
width: 16px;
line-height: 16px;
vertical-align: middle;
top: -1px;
right: -5px;
color: $--tag-font-color;
&::before { @include when(hit) {
display: block; border-color: $--tag-primary-color;
} }
.el-tag__close {
color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
&:hover { &:hover {
background-color: $--tag-default-hover-background-color;
color: $--color-white; color: $--color-white;
background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
} }
} }
@include m(info) { &.el-tag--info {
background-color: $--tag-info-fill; background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
border-color: $--tag-info-border; border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
color: $--tag-info-color; color: mix($--tag-info-color, $--color-white, $fontColorWeight);
@include when(hit) { @include when(hit) {
border-color: $--tag-info-color; border-color: $--tag-info-color;
} }
.el-tag__close { .el-tag__close {
color: $--tag-info-color; color: mix($--tag-info-color, $--color-white, $fontColorWeight);
} &:hover {
color: $--color-white;
.el-tag__close:hover { background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
background-color: $--tag-info-color; }
color: $--color-white;
} }
} }
@include m(success) { &.el-tag--success {
background-color: $--tag-success-fill; background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
border-color: $--tag-success-border; border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
color: $--tag-success-color; color: mix($--tag-success-color, $--color-white, $fontColorWeight);
@include when(hit) { @include when(hit) {
border-color: $--tag-success-color; border-color: $--tag-success-color;
} }
.el-tag__close { .el-tag__close {
color: $--tag-success-color; color: mix($--tag-success-color, $--color-white, $fontColorWeight);
} &:hover {
color: $--color-white;
.el-tag__close:hover { background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
background-color: $--tag-success-color; }
color: $--color-white;
} }
} }
@include m(warning) { &.el-tag--warning {
background-color: $--tag-warning-fill; background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
border-color: $--tag-warning-border; border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
color: $--tag-warning-color; color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
@include when(hit) { @include when(hit) {
border-color: $--tag-warning-color; border-color: $--tag-warning-color;
} }
.el-tag__close { .el-tag__close {
color: $--tag-warning-color; color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
} &:hover {
color: $--color-white;
.el-tag__close:hover { background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
background-color: $--tag-warning-color; }
color: $--color-white;
} }
} }
@include m(danger) { &.el-tag--danger {
background-color: $--tag-danger-fill; background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
border-color: $--tag-danger-border; border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
color: $--tag-danger-color; color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
@include when(hit) { @include when(hit) {
border-color: $--tag-danger-color; border-color: $--tag-danger-color;
} }
.el-tag__close { .el-tag__close {
color: $--tag-danger-color; color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
&:hover {
color: $--color-white;
background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
}
} }
}
}
.el-tag__close:hover { @include b(tag) {
background-color: $--tag-danger-color; @include genTheme(10%, 20%, 100%, 100%);
color: $--color-white; display: inline-block;
height: 32px;
padding: $--tag-padding;
line-height: 30px;
font-size: $--tag-font-size;
color: $--tag-primary-color;
border-width: 1px;
border-style: solid;
border-radius: $--tag-border-radius;
box-sizing: border-box;
white-space: nowrap;
.el-icon-close {
border-radius: 50%;
text-align: center;
position: relative;
cursor: pointer;
font-size: 12px;
height: 16px;
width: 16px;
line-height: 16px;
vertical-align: middle;
top: -1px;
right: -5px;
&::before {
display: block;
} }
} }
@include m(dark) {
@include genTheme(100%, 100%, 0, 80%);
}
@include m(plain) {
@include genTheme(0, 40%, 100%, 100%);
}
@include m(medium) { @include m(medium) {
height: 28px; height: 28px;
line-height: 26px; line-height: 26px;
......
test/unit/specs/tag.spec.js
View file @ cefd2356
import { createVue, destroyVM } from '../util'; import { createTest, createVue, destroyVM } from '../util';
import Tag from 'packages/tag';
describe('Tag', () => { describe('Tag', () => {
let vm; let vm;
...@@ -113,4 +114,12 @@ describe('Tag', () => { ...@@ -113,4 +114,12 @@ describe('Tag', () => {
done(); done();
}, 20); }, 20);
}); });
it('theme', () => {
vm = createTest(Tag, { effect: 'dark' }, true);
const el = vm.$el;
expect(el.className).to.includes('el-tag--dark');
expect(el.className).to.not.includes('el-tag--light');
expect(el.className).to.not.includes('el-tag--plain');
});
}); });
types/tag.d.ts
View file @ cefd2356
import { ElementUIComponent, ElementUIComponentSize } from './component' import { ElementUIComponent, ElementUIComponentSize } from './component'
export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger' export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger'
export type TagTheme = 'dark' | 'light' | 'plain'
/** Tag Component */ /** Tag Component */
export declare class ElTag extends ElementUIComponent { export declare class ElTag extends ElementUIComponent {
/** Theme */ /** Tag type */
type: TagType type: TagType
/** Whether Tab can be removed */ /** Whether Tab can be removed */
...@@ -21,4 +22,7 @@ export declare class ElTag extends ElementUIComponent { ...@@ -21,4 +22,7 @@ export declare class ElTag extends ElementUIComponent {
/** Tag size */ /** Tag size */
size: ElementUIComponentSize size: ElementUIComponentSize
/** Tag theme */
effect: TagTheme
} }
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