Accordion
Example
Yes. It adheres to the WAI-ARIA design pattern.
I mean, I hope so? It's based on the bits-ui accordion component, so if not it's not my fault 😅
Usage
<script lang="ts">
import { Accordion, AccordionItem } from 'fuchs';
</script>
<Accordion type="single">
<AccordionItem title="Is it accessible?">
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionItem>
<AccordionItem title="Are you sure?">
I mean, I hope so? It's based on the bits-ui accordion component, so if not it's not my fault 😅
</AccordionItem>
</Accordion>API Reference
Accordion
| Property | Type | Description |
|---|---|---|
children required | Type Snippet | Description The children content to render. Should be a list of AccordionItem components. |
type required | Type enum 'single' | 'multiple' | Description If set to 'multiple', the accordion will allow multiple items to be open at the same time. If set to single, the accordion will only allow a single item to be open. |
value bindable | Type union string | string[] | Description The value of the accordion item that is currently open. If type is set to "multiple", this will be an array of strings. If type is set to "single", this will be a string. |
onValueChange | Type function (value: string) => void | (value: string[]) => void | Description A function that is called when the value of the accordion item changes. |
disabled | Type boolean default: false | Description Whether the accordion is disabled. |
ref bindable | Type HTMLDivElement | Description The underlying DOM element being rendered. You can bind to this to get a reference to the element. |
AccordionItem
| Property | Type | Description |
|---|---|---|
title required | Type string | Description The title of the accordion item, displayed both when the item is closed or open. |
children required | Type Snippet | Description The children content to render. The content is displayed when the item is open. |
value | Type string | Description The value of the accordion item. This is used to identify when the item is open or closed. If not provided, a unique ID will be generated for this value. |
disabled | Type boolean default: false | Description Whether the accordion item is disabled. |
ref bindable | Type HTMLDivElement | Description The underlying DOM element being rendered. You can bind to this to get a reference to the element. |
Credits
This component is based on the bits-ui accordion component.