アセットカードAssetCardExperimental
メディアライブラリや制作物一覧で使う、選択・お気に入り・スコア表示付きのアセットカードです。
プレビュー
4.5
Instagram_Story_v2.png
1920 x 1080 / JPG 1.4MB / 2026-05-12
状態とバリエーション
選択中
選択中のアセットは枠線、リング、チェックで示し、クリックまたはキーボード操作で切り替えます。
4.5
Instagram_Story_v2.png
1920 x 1080 / JPG 1.4MB / 2026-05-12
コンパクト
サイドパネルや小さいグリッドでは、compact variant で余白と文字サイズを抑えます。
thumbnail_square.png
1920 x 1080 / JPG 1.4MB / 2026-05-12
全体確認
標準は画像面を枠いっぱいに見せます。バナーや縦長素材の全体を確認したい時は imageFit="contain" を使います。
4.5
full_asset_preview.jpg
1920 x 600 / JPG 1.4MB / 2026-05-12
画像なし
画像がないアセットでも、形式やタイトルで内容が判断できるようにします。
プレビュー画像がありません
brief_document.pdf
1920 x 1080 / PDF 1.4MB / 2026-05-12
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| asset | AssetCardAsset | - | カードに表示するメディア項目です。 |
| selected | boolean | - | 選択中の枠線とリングを表示します。 |
| selectionMode | "single" | "multiple" | "none" | "single" | 選択インジケータの表示方法を指定します。 |
| imageFit | "cover" | "contain" | "cover" | 画像面を枠いっぱいに見せるか、全体確認用に収めるかを指定します。 |
| asset.rating | number | - | メディアワークフローとインスペクター編集で使う任意の 0-5 点評価です。 |
| asset.score | string | number | - | 旧形式の代替表示です。メディアライブラリの評価表示には asset.rating を優先します。 |
| noImageLabel | string | "Preview image not found" | プレビュー画像がないアセットで ImagePreview に渡すラベルです。 |
| onSelect | (asset) => void | - | カードクリック、またはキーボード操作時に呼び出されます。 |
| onPreview | (asset) => void | - | 画像エリアにプレビュー操作ボタンを追加します。 |
| portalContainer | HTMLElement | null | - | 擬似ブラウザや入れ子のプレビュー内にツールチップを閉じ込める表示先です。 |
| renderMeta | (asset) => ReactNode | - | 寸法・形式・日付のメタ情報行を差し替えます。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。JSX を返すため serializable な代替は無く、RSC からは "use client" ラッパーで包む。(#338) |
使い方
import { AssetCard } from "@gunjo/ui";
const asset = {
id: "hero",
title: "Instagram_Story_v2.png",
src: "/assets/campaign-hero.jpg",
width: 1920,
height: 1080,
type: "JPG",
size: "1.4MB",
isFavorite: true,
rating: 4.5,
};
export function Example() {
return (
<AssetCard
asset={asset}
selected
onSelect={() => {}}
onPreview={() => {}}
/>
);
}