mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-16 11:44:01 +08:00
feat(Tag): add prop effect. (#15725)
This commit is contained in:
Simona
@@ -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 时触发的事件 | — |
|
||||
|
||||
Reference in New Issue
Block a user