Accordion
Theme-aware, responsive accordion component.
Usage
Components are auto-discovered. Use the component directly in any .wrn view:
<Accordion
size="default"
color="primary"
items="[]"
multiple="false"
/>Legacy mount name: data-component="Accordion".
Props and attributes
| Prop | Type | Requirement | Default |
|---|---|---|---|
size | string | Optional | "default" |
color | string | Optional | "primary" |
items | string | Optional | [] |
multiple | boolean | Optional | false |
class | string | Optional | "" |
Slots
default
Events
This component does not declare a custom event.
Source contract
Installed source: components/Accordion.wrn
component Accordion {
props {
size = "default"
color = "primary"
items = []
multiple = false
class = ""
}
view {
<div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--accordion {class}">
{#each items as item}<details open="{item.open}">
<summary>{item.label}</summary>
<div>{item.content}</div>
</details>{/each}
<slot />
</div>
}
}