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
Attributes
Name | 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 |
round | whether Tag is rounded | boolean | — | false |
Events
Name | Description | Parameters |
---|---|---|
click | triggers when Tag is clicked | — |
close | triggers when Tag is removed | — |
Slots
Name | Description |
---|---|
— | customize default content |
CheckTag Attributes
Name | Description | Type | Accepted Values | Default |
---|---|---|---|---|
checked | is checked | boolean | true/false | — |
CheckTag Events
Name | Description | Parameters |
---|---|---|
change | triggers when Check Tag is clicked | checked |
CheckTag Slots
Name | Description |
---|---|
— | customize default content |