A list of items that are hidden, and only displayed when necessary to store content
Default
To implement the collapse we have the component vs-collapse
and as sub-component for each item the component vs-collapse-item
Accordion
You may need to show only one element and the others contract for this is the property accordion
Type
You can easily change the style of the accordion with the type
property, the supported styles are:
- shadow
- border
- margin
Open Hover
If you want the items to open when you hover in, add theopen-hover
property in the componentChange Arrow Icon
You can customise the arrow on the componentvs-collapse
by passing the string name of an icon to theicon-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.API
| 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 |