AccordionPanel
- SmartHR UI v24.1.0
- Storybook
- ソースコード（GitHub）
Props
AccordionPanel props
| Name | Required | Type | Description |
|---|---|---|---|
| children | true | string,
number,
false,
true,
ReactElement<any, string | JSXElementConstructor<any>>,
ReactFragment,
ReactPortal | アコーディオンの内容 |
| iconPosition | - | "left",
"right" | アイコンの左右位置 |
| displayIcon | - | false,
true | アイコンを表示するかどうか |
| expandableMultiply | - | false,
true | 複数のパネルを同時に開くことを許容するかどうか |
| defaultExpanded | - | string[] | デフォルトで開いた状態にするアイテムの `name` の配列 |
| className | - | string | コンポーネントのクラス名 |
| onClick | - | (expandedItems: string[]) => void | トリガのクリックイベントを処理するハンドラ |
AccordionPanelItem props
| Name | Required | Type | Description |
|---|---|---|---|
| name | true | string | アイテムを識別するための名前 |
| children | true | string,
number,
false,
true,
ReactElement<any, string | JSXElementConstructor<any>>,
ReactFragment,
ReactPortal | アコーディオンのアイテムの内容 |
| className | - | string | アイテムのクラス名 |
AccordionPanelTrigger props
| Name | Required | Type | Description |
|---|---|---|---|
| children | true | string,
number,
false,
true,
ReactElement<any, string | JSXElementConstructor<any>>,
ReactFragment,
ReactPortal | ヘッダ部分の内容 |
| className | - | string | ヘッダ部分のクラス名 |
| headingType | - | "screenTitle",
"sectionTitle",
"blockTitle",
"subBlockTitle",
"subSubBlockTitle" | ヘッダ部分のテキストのスタイル |
| headingTag | - | "h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"legend",
"span" | ヘッダ部分のタグ指定 |