Chips are compact elements that represent an input, attribute, or action.
Helps you represent simple data with colorful options.
Change the background color of the chip.
You can create chip which have transparent background using transparent
prop.
Add a nice icon to the chip.
TIP
Vuesax uses the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.
You can add and remove chips with the vs-chips
component. For the main parameter, pass the items
property, which is an array representing each chip.
You can change the icons used for the close button and the clear button when using multiple chips with the vs-chips
component. For the main parameter, pass the close-icon
property, which is the close icon that appears on each chip. You can change the Clear Chips button with the remove-icon
property.
TIP
Vuesax uses the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.
FontAwesome and other fonts library are supported. Simply use the icon-pack
with fa
or fas
. You still need to include the Font Awesome icons in your project.
Name | Type | Parameters | Description | default |
---|---|---|---|---|
color | String | RGB, HEX, primary, success, danger, warning, dark | Component color | primary |
transparent | Boolean | true/false | Create chip with transparent background | false |
closable | Boolean | With closable button | false | |
icon | String | With custom icon | ||
icon-pack | String | Icon Pack Class Name | Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. | material-icons |
close-icon | String | provides an icon for the button to close chip. | clear | |
placeholder | String | Placeholder text (only in vs-chips) | ||
remove-icon | String | provides an icon for the button to remove chips (only in vs-chips) | close |