画像プレビューImagePreviewExperimental
アセットカード、選択ダイアログ、メディア確認で使う枠付きの画像プレビュー面です。
プレビュー
状態とバリエーション
枠いっぱい
カードの画像面では、標準で画像を枠いっぱいに見せます。
全体を収める
バナーや縦長素材の確認では、素材全体を収めて表示します。
画像なし
画像がない場合は、フォールバック表示でプレビュー面のサイズを維持します。
画像が見つかりません
未設定の画像
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| src | string | - | 画像の URL です。 |
| alt | string | - | 画像の代替テキストです。 |
| variant | "default" | "contain" | "empty" | "default" | 画像プレビュー面の用途を指定します。 |
| aspectRatio | "square" | "video" | "auto" | "portrait" | "wide" | "square" | Img に渡すアスペクト比です。 |
| objectFit | Img objectFit | - | 画像の収め方を上書きします。標準は cover、contain variant では contain です。 |
| loading | "eager" | "lazy" | "lazy" | Img に渡す画像読み込み方式です。ファーストビューの大きなプレビューでは eager を指定できます。 |
| noImageLabel | string | "Image not found" | src がない時や読み込みに失敗した時に、標準の no image プレースホルダーへ表示するラベルです。 |
| onPreview | () => void | - | 拡大表示ボタンを表示し、押した時に呼び出されます。 |
| portalContainer | HTMLElement | null | - | 擬似ブラウザや入れ子のプレビュー内にツールチップを閉じ込める表示先です。 |
| children | ReactNode | - | バッジ、選択表示、お気に入り操作などを重ねるためのスロットです。 |
使い方
Loading...