Onu UITag UPDATED
Tags are used to inform the user of the status of specific data.
Basic usage
Use the type attribute to define Tag's type. In addition, the bgColor attribute can be used to set the background color of the Tag.
Removable Tag
closable attribute can be used to define a removable tag. It accepts a Boolean. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the disable-transitions attribute, which accepts a Boolean, to true. close event triggers when Tag is removed.
Edit Dynamically
You can use the close event to add and remove tag dynamically.
TODO
Sizes
Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.
Use attribute size to set additional sizes with xs, sm,md,lg.
Theme
Tag provide three different themes: dark、light
Using light to change, default is dark
Rounded
Tag can also be rounded like button.
Checkable tag
TODO
Tag Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | Tag size. |
| light | boolean | false | Determine whether it's a light tag. |
| type | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'primary' | Tag type. |
| closable | boolean | false | Whether Tag can be removed. |
| bgColor | string | undefined | Background color of the tag. |
| rounded | boolean | false | Whether tag is rounded. |
Tag Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | Customize default content. |
Tag Methods
| Name | Parameters | Description |
|---|---|---|
| click | () => void | Triggers when Tag is clicked. |
| close | () => void | Triggers when Tag is removed. |