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: darklight and plain

Rounded

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. You can use type prop in 2.5.4.

Tag API

Tag Attributes

NameDescriptionTypeDefault
typetype of Tagenumprimary
closablewhether Tag can be removedbooleanfalse
disable-transitionswhether to disable animationsbooleanfalse
hitwhether Tag has a highlighted borderbooleanfalse
colorbackground color of the Tagstring
sizesize of Tagenum
effecttheme of Tagenumlight
roundwhether Tag is roundedbooleanfalse

Tag Events

NameDescriptionType
clicktriggers when Tag is clickedFunction
closetriggers when Tag is removedFunction

Tag Slots

NameDescription
defaultcustomize default content

CheckTag API

CheckTag Attributes

NameDescriptionTypeDefault
checked / v-model:checkedis checkedbooleanfalse
type 2.5.4type of CheckTagenumprimary

CheckTag Events

NameDescriptionType
changetriggers when Check Tag is clickedFunction

CheckTag Slots

NameDescription
defaultcustomize default content

Source

ComponentDocs

Contributors