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 the open-hover property in the component

    Change Arrow Icon

    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.

    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 |