Tag
Used for marking and selection.
Basic usage
Removable Tag
Edit Dynamically
You can use the close event to add and remove tag dynamically.
Sizes
Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.
Theme
Tag provide three different themes: dark、light and plain
Checkable tag
Sometimes because of the business needs, we might need checkbox like tag, but button like checkbox cannot meet our needs, here comes check-tag
Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| 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 | large / default /small | default |
| 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 | — |
Slots
| Name | Description |
|---|---|
| — | customize default content |
CheckTag Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| checked | is checked | boolean | true/false | — |
CheckTag Events
| Event Name | Description | Parameters |
|---|---|---|
| change | triggers when Check Tag is clicked | checked |
CheckTag Slots
| Name | Description |
|---|---|
| — | customize default content |