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