BaseAccordion

Default

dark preview

By default, all <BaseAccordion> items can be open at the same time.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Show code

vue

Exclusive

dark preview

You can set the exclusive property to true to force only one item to be open at a time.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Show code

vue

Radius

dark preview

You can change the shape of the accordion with the rounded property.

Default props of all <BaseAccordion> can be set in your <app>/app.config.ts.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Show code

vue

Icon:chevron

dark preview

<BaseAccordion> accepts an action property that you can use to change the icon of the accordion. By default, it uses the dot icon, but you can use chevron or plus as well.

Here is an example of an accordion with action="chevron".

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Show code

vue

Icon:plus

dark preview

<BaseAccordion> accepts an action property that you can use to change the icon of the accordion. By default, it uses the dot icon, but you can use chevron or plus as well.

Here is an example of an accordion with action="plus".

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.

Show code

vue

#<BaseAccordion>

•Properties

Name

Type

items

The items to display in the accordion.

Required

Show example

vue

classes

Optional CSS classes to apply to the wrapper, label, input, addon, error, and icon elements.

Show example

vue

exclusive

Whether if multiple elements in the accordion can be opened at same time or not.

Show example

vue

open-items

Indexes of the items that should be opened by default.

Show example

vue

•Properties (with app.config)

Name

Type

color

Defines the color of the accordion

@since

3.0.0

Show example

vue

rounded

Defines the radius of the accordion

@since

2.0.0

Show example

vue

action

Defines the icon used for accordion item toggle action

Show example

vue

dot-color

Defines the color of the accordion dot

@since

3.0.0

Show example

vue

•Events

Name

Emitted Value Type

@open

Show example

vue

•Slots

Name

Slot Prop Type

#accordion-item

Show example

vue

#accordion-item-summary

Show example

vue

#accordion-item-content

Show example

vue