AccordionPanel
- SmartHR UI v21.4.5
- Storybook
- ソースコード(GitHub)
Props
AccordionPanel props
Name | Required | Type | Description |
---|---|---|---|
children | true | string ,
number ,
false ,
true ,
{} ,
ReactElement<any, string | JSXElementConstructor<any>> ,
Iterable<ReactNode> ,
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>> ,
Iterable<ReactNode> ,
ReactPortal | アコーディオンのアイテムの内容 |
className | - | string | アイテムのクラス名 |
AccordionPanelTrigger props
Name | Required | Type | Description |
---|---|---|---|
children | true | string ,
number ,
false ,
true ,
{} ,
ReactElement<any, string | JSXElementConstructor<any>> ,
Iterable<ReactNode> ,
ReactPortal | ヘッダ部分の内容 |
className | - | string | ヘッダ部分のクラス名 |
headingType | - | "screenTitle" ,
"sectionTitle" ,
"blockTitle" ,
"subBlockTitle" ,
"subSubBlockTitle" | ヘッダ部分のテキストのスタイル |
headingTag | - | "h1" ,
"h2" ,
"h3" ,
"h4" ,
"h5" ,
"h6" ,
"legend" ,
"span" | ヘッダ部分のタグ指定 |