mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-16 11:44:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Simona
2019-05-27 16:06:58 +08:00
committed by luckyCao
parent d0debda76c
commit cefd235615
10 changed files with 367 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
examples/docs/en-US/tag.md
View File

@@ -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 | — |