メディアライブラリMedia LibraryExperimental
メディアライブラリ用のレイアウトです。
プレビュー
状態とバリエーション
header・sidebar・details はどれも省略できます。左のフォルダは中くらいの幅から、右の詳細は広い幅から現れ、一覧は常に残ります。
フォルダと詳細つき
左にフォルダ、右に選んだファイルの情報を並べた標準形です。真ん中は一覧に使います。
表紙.png
図版 1.png
図版 2.png
背景.jpg
ロゴ.svg
写真.jpg
詳細を閉じる
details を省くと一覧が右まで広がり、1行に並ぶ枚数が増えます。探している最中はこちらが向いています。
表紙.png
図版 1.png
図版 2.png
背景.jpg
ロゴ.svg
写真.jpg
一覧だけ
children だけを渡すと一覧だけが残ります。すでに見出しや検索を持つ画面へ埋め込むときに使います。
表紙.png
図版 1.png
図版 2.png
背景.jpg
ロゴ.svg
写真.jpg
View as a full app
/patterns/media-library wraps the template in a working media management mini-site with mock state.
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| header | ReactNode | - | Content for the top header area. |
| sidebar | ReactNode | - | Content for the left sidebar (e.g., folder tree). Hidden on mobile. |
| details | ReactNode | - | Content for the right details panel (e.g., metadata inspector). Hidden on tablet/mobile. |
| children | ReactNode | - | The main content area, typically for displaying an asset grid. |