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
Show 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 @@
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
......@@ -9,9 +10,25 @@
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
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.
:::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
<el-tag>Tag One</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>
<el-tag>Tag 1</el-tag>
<el-tag type="success">Tag 2</el-tag>
<el-tag type="info">Tag 3</el-tag>
<el-tag type="warning">Tag 4</el-tag>
<el-tag type="danger">Tag 5</el-tag>
```
:::
......@@ -139,15 +139,62 @@ 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
| 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 |
| disable-transitions | whether to disable animations | boolean | — | false |
| hit | whether Tag has a highlighted border | boolean | — | false |
| color | background color of the Tag | string | — | — |
| size | tag size | string | medium / small / mini | — |
| effect | component theme | string | dark / light / plain | light |
### Events
......
examples/docs/es/tag.md
View file @ cefd2356
......@@ -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.
```html
<el-tag>Tag One</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>
<el-tag>Tag 1</el-tag>
<el-tag type="success">Tag 2</el-tag>
<el-tag type="info">Tag 3</el-tag>
<el-tag type="warning">Tag 4</el-tag>
<el-tag type="danger">Tag 5</el-tag>
```
:::
......@@ -139,15 +139,61 @@ 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
| 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 |
| disable-transitions | si se deshabilitan las animaciones | boolean | — | false |
| hit | si el Tag tiene un borde resaltado | boolean | — | false |
| color | color de fondo del Tag | string | — | — |
| size | tamaño del Tag | string | medium / small / mini | — |
| effect | component theme | string | dark / light / plain | light |
### Eventos
......
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
```
:::
### 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
| 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
| hit | Si le tag à une bordure mise en valeur. | boolean | — | false |
| color | Couleur de fond du tag. | string | — | — |
| size | Taille du tag. | string | medium / small / mini | — |
| effect | component theme | string | dark / light / plain | light |
### Évènements
......
examples/docs/zh-CN/tag.md
View file @ cefd2356
......@@ -139,15 +139,61 @@ 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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| type | 主题 | string | success/info/warning/danger | — |
| type | 类型 | string | success/info/warning/danger | — |
| closable | 是否可关闭 | boolean | — | false |
| disable-transitions | 是否禁用渐变动画 | boolean | — | false |
| hit | 是否有边框描边 | boolean | — | false |
| color | 背景色 | string | — | — |
| size | 尺寸 | string | medium / small / mini | — |
| effect | 主题 | string | dark / light / plain | light |
### Events
......
packages/tag/src/tag.vue
View file @ cefd2356
......@@ -8,7 +8,14 @@
hit: Boolean,
disableTransitions: Boolean,
color: String,
size: String
size: String,
effect: {
type: String,
default: 'light',
validator(val) {
return ['dark', 'light', 'plain'].includes(val);
}
}
},
methods: {
handleClose(event) {
......@@ -26,16 +33,25 @@
}
},
render(h) {
const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '',
this.tagSize ? `el-tag--${this.tagSize}` : '',
{'is-hit': this.hit}
const { type, tagSize, hit, effect } = this;
const classes = [
'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 = (
<span
class={ classes }
style={{ backgroundColor: this.color }}
on-click={ this.handleClick }>
{ this.$slots.default }
{
this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i>
this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
}
</span>);
</span>
);
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;
/* 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
$--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-primary-fill: rgba($--color-primary, 0.10) !default;
$--tag-primary-border: rgba($--color-primary, 0.20) !default;
/// color||Color|0
$--tag-primary-color: $--color-primary !default;
$--tag-success-fill: rgba($--color-success, 0.10) !default;
$--tag-success-border: rgba($--color-success, 0.20) !default;
/// color||Color|0
$--tag-success-color: $--color-success !default;
$--tag-warning-fill: rgba($--color-warning, 0.10) !default;
$--tag-warning-border: rgba($--color-warning, 0.20) !default;
/// color||Color|0
$--tag-warning-color: $--color-warning !default;
$--tag-danger-fill: rgba($--color-danger, 0.10) !default;
$--tag-danger-border: rgba($--color-danger, 0.20) !default;
/// color||Color|0
$--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
-------------------------- */
......
packages/theme-chalk/src/tag.scss
View file @ cefd2356
@import "mixins/mixins";
@import "common/var";
@include b(tag) {
background-color: $--tag-fill;
display: inline-block;
padding: $--tag-padding;
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;
@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) {
background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);
border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
.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 {
display: block;
@include when(hit) {
border-color: $--tag-primary-color;
}
.el-tag__close {
color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
&:hover {
background-color: $--tag-default-hover-background-color;
color: $--color-white;
background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
}
}
@include m(info) {
background-color: $--tag-info-fill;
border-color: $--tag-info-border;
color: $--tag-info-color;
&.el-tag--info {
background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
color: mix($--tag-info-color, $--color-white, $fontColorWeight);
@include when(hit) {
border-color: $--tag-info-color;
}
.el-tag__close {
color: $--tag-info-color;
}
.el-tag__close:hover {
background-color: $--tag-info-color;
color: mix($--tag-info-color, $--color-white, $fontColorWeight);
&:hover {
color: $--color-white;
background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
}
}
}
@include m(success) {
background-color: $--tag-success-fill;
border-color: $--tag-success-border;
color: $--tag-success-color;
&.el-tag--success {
background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
color: mix($--tag-success-color, $--color-white, $fontColorWeight);
@include when(hit) {
border-color: $--tag-success-color;
}
.el-tag__close {
color: $--tag-success-color;
}
.el-tag__close:hover {
background-color: $--tag-success-color;
color: mix($--tag-success-color, $--color-white, $fontColorWeight);
&:hover {
color: $--color-white;
background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
}
}
}
@include m(warning) {
background-color: $--tag-warning-fill;
border-color: $--tag-warning-border;
color: $--tag-warning-color;
&.el-tag--warning {
background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
@include when(hit) {
border-color: $--tag-warning-color;
}
.el-tag__close {
color: $--tag-warning-color;
}
.el-tag__close:hover {
background-color: $--tag-warning-color;
color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
&:hover {
color: $--color-white;
background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
}
}
}
@include m(danger) {
background-color: $--tag-danger-fill;
border-color: $--tag-danger-border;
color: $--tag-danger-color;
&.el-tag--danger {
background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
@include when(hit) {
border-color: $--tag-danger-color;
}
.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 {
background-color: $--tag-danger-color;
color: $--color-white;
@include b(tag) {
@include genTheme(10%, 20%, 100%, 100%);
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) {
height: 28px;
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', () => {
let vm;
......@@ -113,4 +114,12 @@ describe('Tag', () => {
done();
}, 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'
export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger'
export type TagTheme = 'dark' | 'light' | 'plain'
/** Tag Component */
export declare class ElTag extends ElementUIComponent {
/** Theme */
/** Tag type */
type: TagType
/** Whether Tab can be removed */
......@@ -21,4 +22,7 @@ export declare class ElTag extends ElementUIComponent {
/** Tag size */
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