natxocc
e842ed8041
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
# Accordion
|
|
|
|
Collapsible accordion component for organizing content into expandable sections.
|
|
|
|
## Tag
|
|
|
|
`Accordion`
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| :--------- | :--------------------------- | :--------------- | :----------------------------------------- |
|
|
| `title` | `string \| VNode \| Signal` | Required | Accordion section title |
|
|
| `open` | `boolean \| Signal<boolean>` | `false` | Whether the accordion is expanded |
|
|
| `name` | `string` | `auto-generated` | Group name for radio-style accordions |
|
|
| `class` | `string` | `''` | Additional CSS classes |
|
|
| `children` | `VNode \| Array<VNode>` | Required | Content to display when expanded |
|
|
| `items` | `Array` | `-` | Array of accordion items (alternative API) |
|
|
|
|
## Live Examples
|
|
|
|
### Basic Accordion
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```js
|
|
const { Accordion, Div, mount } = window;
|
|
|
|
const BasicDemo = () => {
|
|
const open1 = $(false);
|
|
const open2 = $(false);
|
|
const open3 = $(false);
|
|
|
|
return div({ class: "flex flex-col gap-2" }, [
|
|
Accordion(
|
|
{
|
|
title: "Section 1",
|
|
open: open1,
|
|
},
|
|
div(
|
|
{ class: "p-2" },
|
|
"Content for section 1. This is a basic accordion section.",
|
|
),
|
|
),
|
|
Accordion({
|
|
title: "Section 2",
|
|
open: open2,
|
|
}, div(
|
|
{ class: "p-2" },
|
|
"Content for section 2. You can put any content here.",
|
|
),),
|
|
Accordion({
|
|
title: "Section 3",
|
|
open: open3,
|
|
children: div(
|
|
{ class: "p-2" },
|
|
"Content for section 3. Accordions are great for FAQs.",
|
|
),
|
|
}),
|
|
]);
|
|
};
|
|
mount(BasicDemo, "#demo-basic");
|
|
```
|