Accordion
折りたたみ可能なコンテンツセクション。
インポート
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@caroainc/ui-components/client'個別サブパス（バンドルサイズを抑えたい場合）:
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@caroainc/ui-components/accordion'Composition
Accordion
└─ AccordionItem+
├─ AccordionTrigger
└─ AccordionContent各AccordionItemには一意なvalueと、Trigger／Contentの組が必要です。TriggerやContentをItemの外へ出したり、別のItemへ分けたりしないでください。
基本的な使い方
Loading...
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>アコーディオン1</AccordionTrigger>
<AccordionContent>
アコーディオン1の内容です。
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>アコーディオン2</AccordionTrigger>
<AccordionContent>
アコーディオン2の内容です。
</AccordionContent>
</AccordionItem>
</Accordion>複数開く（multiple）
Loading...
<Accordion type="multiple">
...
</Accordion>無効化されたアイテム
AccordionItemにdisabledを指定すると、そのアイテムだけ開閉できなくなります。
Loading...
<AccordionItem value="item-2" disabled>
<AccordionTrigger>無効化されている</AccordionTrigger>
<AccordionContent>開閉できません</AccordionContent>
</AccordionItem>縦向き・横向き（orientation）
orientationはRadix UIのAccordionPrimitive.Rootのpropで、キーボード操作（矢印キー）の方向を
切り替えます。レイアウト自体はclassNameで調整してください。デフォルトは'vertical'です。
{/* デフォルト: 上下矢印キーでアイテム間を移動 */}
<Accordion type="single" collapsible orientation="vertical">...</Accordion>
{/* 左右矢印キーでアイテム間を移動（横並びレイアウトと組み合わせる想定） */}
<Accordion type="single" collapsible orientation="horizontal">...</Accordion>Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
type* | 'single' | 'multiple' | - | 単一選択か複数選択か |
collapsible | boolean | false | type="single"時、全て閉じることを許可 |
defaultValue | string | string[] | - | 初期展開するアイテム |
orientation | 'vertical' | 'horizontal' | 'vertical' | キーボード操作（矢印キー）の方向 |
disabled | boolean | false | Accordion全体を無効化するか |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | - | アイテムの識別値 |
disabled | boolean | false | このアイテムのみ無効化するか |