Accordion

Divide content into collapsible sections.

Import

import {
  MpAccordion,
  MpAccordionHeader,
  MpAccordionIcon,
  MpAccordionItem,
  MpAccordionPanel
} from '@mekari/pixel3'

Playground

API

MpAccordion

Props

Events

Slots

Name	Type	Default
default-index-open Default index for opened accordion.	number	-
is-allow-multiple If true, multiple accordion items can be expanded at once.	boolean	true
is-allow-toggle If true, any expanded accordion item can be collapsed again.	boolean	false
is-controlled If true, accordion will be controll manually.	boolean	false

MpAccordionItem

Props

Slots

Name	Type	Default
id Id of accordion item.	string	-
is-open If true, accordion item will be open.	boolean	false
is-default-open If true, accordion item will be initially opened.	boolean	false
is-disabled If true, accordion item will be disabled.	boolean	false

MpAccordionHeader

Props

Slots

Name	Type	Default
is-clickable If true, accordion header is clickable	boolean	true

MpAccordionIcon

Props

Name	Type	Default
name Name of accordion icon.	IconName	chevrons-down

MpAccordionPanel

Slots

Name	Type
default Accordion panel slot	any

Usage

Icon position

Multiple expand

Controlled

Allow toggle

Description

Badge