Accordion
Basic
jui-accordion の最も基本的な使用例です。
Usage
コンポーネントの基本的な使用方法です。
概要 (Overview)
jui-accordion — アコーディオンコンポーネント
HeroUI + Radix UI インスパイア。 単一/複数展開、アニメーション付き。
プロパティ (Properties)
コンポーネントが受け付ける属性(Props)の一覧と詳細仕様です。
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
items | items | 項目(JSON文字列 or 配列) | AccordionItem[] | string | '[]' |
multiple | multiple | 複数同時展開を許可 | boolean | false |
variant | variant | バリアント | "bordered" | "default" | "splitted" | 'default' |
イベント (Events)
コンポーネントから発火するカスタムイベントの一覧です。
| Event | Description | Type |
|---|---|---|
juiToggle | 展開/折りたたみ時 | CustomEvent<{ key: string; isOpen: boolean; }> |
シャドウパーツ (Shadow Parts)
CSSから直接スタイリング可能な内部要素(Parts)の一覧です。
| Part | Description |
|---|---|
"content" | コンテンツ領域 |
"item" | アコーディオン項目 |
"trigger" | トリガーボタン |
Built with StencilJS