サイドバー項目SidebarItemExperimental
サイドバー内で使う選択行です。アイコン、ラベル、件数、階層、開閉、削除操作を同じ行幅で揃えて表示します。
プレビュー
ライブラリ
128
24
8
3
フォルダ
18
6
42
状態とバリエーション
フラットな項目
階層を持たないナビゲーションでは、先頭の開閉スペースを消して左端を揃えます。
3
行アクション付き
削除などの行アクションは右端の予約枠に置き、件数の位置を揃えます。
ライブラリ
128
24
8
3
フォルダ
18
6
42
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| id | string | - | 項目を識別する ID。 |
| label | string | - | 行に表示するラベル。 |
| icon | ReactNode | - | ラベルの前に表示するアイコン。 |
| count | number | - | 右端に表示する件数。 |
| isActive | boolean | - | 現在選択中の項目かどうか。 |
| level | number | 0 | 階層の深さ。子要素のインデントに使います。 |
| hasChildren | boolean | false | 開閉できる子要素を持つことを示します。 |
| isExpanded | boolean | false | 子要素が開いている状態を示します。 |
| reserveChevronSpace | boolean | true | 階層表示のための開閉スペースを予約します。 |
| onClick | () => void | - | 行を選択した時に呼ばれます。 |
| onToggleExpand | (event: MouseEvent) => void | - | 開閉アイコンまたは子を持つ行を操作した時に呼ばれます。 |
| onDelete | (event: MouseEvent) => void | - | 右端の削除ボタンを押した時に呼ばれます。 |
| deleteLabel | ReactNode | "Delete" | 削除ボタンのツールチップと aria-label。 |
| dragOverId / dragAction | string | null | - | ドラッグ中の並び替え・ネスト位置を行上に表示します。 |
使い方
Loading...