@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
25 lines (16 loc) • 1.37 kB
Markdown
# MAccordionList
An Accordion List is a component that organizes content into collapsible sections, allowing users to show or hide related information within a vertically stacked layout. This structure helps optimize space and improve readability by displaying only relevant content when needed. Accordion Lists are commonly used in FAQs, settings menus, and structured content navigation to enhance user experience and reduce visual clutter.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `appearance` | Defines the visual appearance of the button. | `"standard"` `"ghost"` | `"standard"` |
| `behavior` | Component behavior: `multiple` allows all items to be open simultaneously, `single` ensures only one item is open at a time. For native HTML implementation, the `single` behavior uses the HTML5 `name` attribute on `<details>` elements for browser-native exclusive behavior.. | `"multiple"` `"single"` | `"multiple"` |
| `modelValue` | IDs of the Accordion items that are currently open. Updating this array controls which sections are expanded. | `string[]` | - |
## Slots
| Name | Description |
| --- | --- |
| `default` | Use this slot to display accordion items. |
## Events
| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emitted when the accordion items state changes. | [value: string[]] |