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
Rounded > 2.1.7
Tag can also be rounded like button.
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
Tag API
Tag Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| type | type of Tag | enum | '' |
| 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 | size of Tag | enum | '' |
| effect | theme of Tag | enum | light |
| round | whether Tag is rounded | boolean | false |
Tag Events
| Name | Description | Type |
|---|---|---|
| click | triggers when Tag is clicked | Function |
| close | triggers when Tag is removed | Function |
Tag Slots
| Name | Description |
|---|---|
| — | customize default content |
CheckTag API
CheckTag Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| checked / v-model:checked | is checked | boolean | false |
CheckTag Events
| Name | Description | Type |
|---|---|---|
| change | triggers when Check Tag is clicked | Function |
CheckTag Slots
| Name | Description |
|---|---|
| — | customize default content |