コンポーネント
Accordion
見出しごとにコンテンツを開閉できる、縦に並んだアコーディオンコンポーネントです。
使い方
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@murasakijs/ui";<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>API リファレンス
Accordion
| Prop | 型 | デフォルト |
|---|---|---|
type | "single" | "multiple" | — （必須） |
collapsible | boolean（type="single" のときのみ） | false |
value / defaultValue | string（single）または string[]（multiple） | — |
onValueChange | (value) => void | — |
その他のサブコンポーネント
| コンポーネント | 説明 |
|---|---|
AccordionItem | 開閉可能な1つのセクションです。value（必須）を受け取ります。 |
AccordionTrigger | クリック可能な見出しで、回転するシェブロンを自動的にレンダリングします。 |
AccordionContent | CSS でアニメーションしながら開閉するパネルです。 |
開閉状態、キーボード操作、ARIA の関連付けは React Aria Components が提供します。Murasaki は従来の value ベース API を維持しています。