アセットグリッドAssetGridExperimental
アセットカードをレスポンシブなグリッドやグループ単位で表示します。
プレビュー
4.5
Campaign_Hero.jpg
1920 x 1080 / JPG 1.4MB / 2026-05-12
3.5
Instagram_Story.png
1080 x 1920 / PNG 2.1MB / 2026-05-10
Product_Square.png
1200 x 1200 / PNG 980KB / 2026-05-09
状態とバリエーション
標準グリッド
アセットカードをレスポンシブに並べ、選択中の ID を selectedIds で制御します。
4.5
Campaign_Hero.jpg
1920 x 1080 / JPG 1.4MB / 2026-05-12
3.5
Instagram_Story.png
1080 x 1920 / PNG 2.1MB / 2026-05-10
Product_Square.png
1200 x 1200 / PNG 980KB / 2026-05-09
コンパクトグリッド
小さいパネルやドロワーでは、カード間隔と情報密度を抑えた表示にします。
4.5
Campaign_Hero.jpg
1920 x 1080 / JPG 1.4MB / 2026-05-12
3.5
Instagram_Story.png
1080 x 1920 / PNG 2.1MB / 2026-05-10
Product_Square.png
1200 x 1200 / PNG 980KB / 2026-05-09
グループ表示
フォルダやカテゴリ単位で、見出し付きの一覧に分けて表示します。
キャンペーン素材
公開前の候補
4.5
Campaign_Hero.jpg
1920 x 1080 / JPG 1.4MB / 2026-05-12
3.5
Instagram_Story.png
1080 x 1920 / PNG 2.1MB / 2026-05-10
Product_Square.png
1200 x 1200 / PNG 980KB / 2026-05-09
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | AssetCardAsset[] | - | グループなしで表示するアセット項目です。 |
| groups | AssetGridGroup[] | - | グループ化したアセット一覧です。items より優先されます。 |
| selectedIds | Iterable<string> | - | 選択中のアセット ID です。 |
| layout | "fill" | "content" | "fill" | カラムをコンテナ幅いっぱいに広げるか、内容幅に収めるかを指定します。 |
| minColumnWidth | number | 180 | 自動配置されるカラムの最小幅です。 |
| onSelect | (asset) => void | - | アセットカード選択時に呼び出されます。 |
| onPreview | (asset) => void | - | 各 AssetCard にプレビュー操作を渡します。 |
| portalContainer | HTMLElement | null | - | 擬似ブラウザや入れ子のプレビュー内にカードのツールチップを閉じ込める表示先です。 |
| renderItem | (asset, state) => ReactNode | - | 標準の AssetCard 表示を差し替えます。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。JSX を返すため serializable な代替は無く、RSC からは "use client" ラッパーで包む。(#338) |
使い方
import { AssetGrid } from "@gunjo/ui";
export function Example({ assets }) {
return (
<AssetGrid
items={assets}
selectedIds={["hero"]}
layout="content"
onSelect={(asset) => console.log(asset.id)}
/>
);
}