UNPKG

@mozaic-ds/vue

Version:

Mozaic-Vue is the Vue.js implementation of ADEO Design system

github.com/adeo/mozaic-vue

adeo/mozaic-vue

26 lines (19 loc) • 1.58 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# MAccordionListItem A unique identifier for the accordion item. It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`), ensuring accessibility and tracking the open/closed state. If no ID is provided, a unique one is generated automatically. ## Props | Name | Description | Type | Default | | --- | --- | --- | --- | | `id*` | A unique identifier for the accordion item. It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`), ensuring accessibility and tracking the open/closed state. If no ID is provided, a unique one is generated automatically. | `string` | - | | `title*` | The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content. | `string` | - | | `subtitle` | An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item. | `string` | - | | `content` | The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements. | `string` | - | | `icon` | Icon component to display before the item title. | `Component` | - | | `tag` | Heading level for the accordion trigger (h2–h6). Adjust to match the heading hierarchy of the page where the accordion is used. | `"h2"` `"h1"` `"h3"` `"h4"` `"h5"` `"h6"` | `"h2"` | ## Slots | Name | Description | | --- | --- | | `default` | Use this slot to display custom content. |