mirror of https://github.com/ElemeFE/element
feat(Tag): add prop effect. (#15725)
Simona
luckyCao
parent
d0debda76c
commit
cefd235615
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,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
|
||||
| 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
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| click | triggers when Tag is clicked | — |
|
||||
| close | triggers when Tag is removed | — |
|
||||
| close | triggers when Tag is removed | — |
|
||||
|
|
|
|||
|
|
@ -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,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
|
||||
| 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
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ------------------------------------ | ---------- |
|
||||
| click | se dispara cuando el Tag es clic | — |
|
||||
| close | se dispara cuando el Tag es removido | — |
|
||||
| close | se dispara cuando el Tag es removido | — |
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| 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
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| click | 点击 Tag 时触发的事件 | — |
|
||||
| close | 关闭 Tag 时触发的事件 | — |
|
||||
| close | 关闭 Tag 时触发的事件 | — |
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
{ this.$slots.default }
|
||||
{
|
||||
this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i>
|
||||
}
|
||||
</span>);
|
||||
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>
|
||||
}
|
||||
</span>
|
||||
);
|
||||
|
||||
return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
$--tag-info-color: $--color-info !default;
|
||||
/// color||Color|0
|
||||
$--tag-default-hover-background-color: $--color-primary !default;
|
||||
$--tag-border: rgba($--color-primary, 0.20) !default;
|
||||
$--tag-primary-color: $--color-primary !default;
|
||||
/// color||Color|0
|
||||
$--tag-success-color: $--color-success !default;
|
||||
/// color||Color|0
|
||||
$--tag-warning-color: $--color-warning !default;
|
||||
/// color||Color|0
|
||||
$--tag-danger-color: $--color-danger !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;
|
||||
$--tag-primary-color: $--color-primary !default;
|
||||
|
||||
$--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-warning-fill: rgba($--color-warning, 0.10) !default;
|
||||
$--tag-warning-border: rgba($--color-warning, 0.20) !default;
|
||||
$--tag-warning-color: $--color-warning !default;
|
||||
|
||||
$--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-padding: 0 10px !default;
|
||||
|
||||
/* Tree
|
||||
-------------------------- */
|
||||
|
|
|
|||
|
|
@ -1,17 +1,108 @@
|
|||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@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);
|
||||
|
||||
@include when(hit) {
|
||||
border-color: $--tag-primary-color;
|
||||
}
|
||||
|
||||
.el-tag__close {
|
||||
color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
|
||||
}
|
||||
}
|
||||
|
||||
&.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: mix($--tag-info-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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: mix($--tag-success-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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: mix($--tag-warning-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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: mix($--tag-danger-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(tag) {
|
||||
background-color: $--tag-fill;
|
||||
@include genTheme(10%, 20%, 100%, 100%);
|
||||
display: inline-block;
|
||||
padding: $--tag-padding;
|
||||
height: 32px;
|
||||
padding: $--tag-padding;
|
||||
line-height: 30px;
|
||||
font-size: $--tag-font-size;
|
||||
color: $--tag-font-color;
|
||||
color: $--tag-primary-color;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $--tag-border-radius;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $--tag-border;
|
||||
white-space: nowrap;
|
||||
|
||||
.el-icon-close {
|
||||
|
|
@ -26,92 +117,18 @@
|
|||
vertical-align: middle;
|
||||
top: -1px;
|
||||
right: -5px;
|
||||
color: $--tag-font-color;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $--tag-default-hover-background-color;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(info) {
|
||||
background-color: $--tag-info-fill;
|
||||
border-color: $--tag-info-border;
|
||||
color: $--tag-info-color;
|
||||
|
||||
@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: $--color-white;
|
||||
}
|
||||
@include m(dark) {
|
||||
@include genTheme(100%, 100%, 0, 80%);
|
||||
}
|
||||
|
||||
@include m(success) {
|
||||
background-color: $--tag-success-fill;
|
||||
border-color: $--tag-success-border;
|
||||
color: $--tag-success-color;
|
||||
|
||||
@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: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(warning) {
|
||||
background-color: $--tag-warning-fill;
|
||||
border-color: $--tag-warning-border;
|
||||
color: $--tag-warning-color;
|
||||
|
||||
@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: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(danger) {
|
||||
background-color: $--tag-danger-fill;
|
||||
border-color: $--tag-danger-border;
|
||||
color: $--tag-danger-color;
|
||||
|
||||
@include when(hit) {
|
||||
border-color: $--tag-danger-color;
|
||||
}
|
||||
|
||||
.el-tag__close {
|
||||
color: $--tag-danger-color;
|
||||
}
|
||||
|
||||
.el-tag__close:hover {
|
||||
background-color: $--tag-danger-color;
|
||||
color: $--color-white;
|
||||
}
|
||||
@include m(plain) {
|
||||
@include genTheme(0, 40%, 100%, 100%);
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
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');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue