A list of items that are hidden, and only displayed when necessary to store content
To implement the collapse we have the component vs-collapse
and as sub-component for each item the component vs-collapse-item
You may need to show only one element and the others contract for this is the property accordion
You can easily change the style of the accordion with the type
property, the supported styles are:
If you want the items to open when you hover in, add the open-hover
property in the component
You can customise the arrow on the component vs-collapse
by passing the string name of an icon to the icon-arrow
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 |
---|---|---|---|---|
accordion | Boolean | Determines whether all the others are closed when an item is opened. | false | |
type | String | default, shadow, border, margin | Change the style of the items. | default |
open-hover | Boolean | Determines if items are opened when hovering. | false | |
not-arrow | Boolean | remove the arrow from the item. | false | |
icon-arrow | String | Change the icons of items. | false | |
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 |
open | Boolean | Start the open item. | false |