開閉パネルトグルCollapsiblePanelToggleExperimental
境界線上に配置して、左右上下の折りたたみパネルを開閉するトグルボタンです。
プレビュー
状態とバリエーション
左境界
左側のナビゲーションやサイドバーを開閉する標準的な境界トグルです。
右境界
右側の補助パネルやインスペクターを開閉する境界トグルです。
上境界
上部のフィルターや補助ツールバーを開閉する境界トグルです。
フィルター公開中担当あり
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| side | "left" | "right" | "top" | "bottom" | "left" | トグルを置くパネルの境界です。アイコンとツールチップ方向も切り替わります。 |
| collapsed | boolean | - | 対象パネルが折りたたまれているかどうかです。 |
| openLabel | string | "Open panel" | 折りたたみ時に表示する aria-label とツールチップです。 |
| closeLabel | string | "Close panel" | 展開時に表示する aria-label とツールチップです。 |
| tooltip | React.ReactNode | - | ツールチップ内容の上書きです。未指定時は openLabel / closeLabel を使います。 |
| iconClassName | string | - | アイコンに追加する className です。 |
| Button props | TooltipButton props | - | onClick、disabled、className などのボタン props を渡せます。 |
使い方
Loading...