コンポーネント
Accordion
それぞれがコンテンツのセクションを開閉する、縦に並んだインタラクティブな見出しの集合です。
import {Accordion,AccordionContent,AccordionItem,AccordionTrigger,} from "@murasakijs/ui";export function AccordionDemo() {return ( <Accordion type="single" collapsible className="w-full max-w-md"> <AccordionItem value="item-1"> <AccordionTrigger>Is it accessible?</AccordionTrigger> <AccordionContent> Yes. It adheres to the WAI-ARIA design pattern. </AccordionContent> </AccordionItem> <AccordionItem value="item-2"> <AccordionTrigger>Is it styled?</AccordionTrigger> <AccordionContent> Yes. It comes with default styles that match the other components. </AccordionContent> </AccordionItem> <AccordionItem value="item-3"> <AccordionTrigger>Is it animated?</AccordionTrigger> <AccordionContent> Yes. It's animated by default, but you can disable it if you prefer. </AccordionContent> </AccordionItem> </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 でアニメーションしながら開閉するパネルです。 |
すべてのサブコンポーネントは Radix UI の Accordion
プリミティブをラップし、それ以外の props はすべてそのまま渡されます。