ギャラリーGalleryExperimental
Main image plus a selectable thumbnail strip with click and keyboard swap, for product detail and media galleries.
プレビュー
状態とバリエーション
Gallery が変えられるのは、サムネイルの置き場所（thumbnailPosition）、主画像の比率（aspectRatio）、そして選択を誰が持つか（value と onValueChange）の3つです。矢印キーでの移動と読み上げの配線は、どの組み合わせでも部品側が持ちます。
サムネイルを横に置く
thumbnailPosition="start" にすると、横幅の広い画面ではサムネイルが左の縦列になります。狭い画面では横並びに戻るので、スマホで縦に長くなりません。
主画像の比率を変える
aspectRatio は主画像の枠だけを決めます。物件の内観や車の外観のような横長の写真は "wide"、人物や什器の全身は "portrait" が合います。枠が先に決まるので、読み込み中でも版面がずれません。
選択を画面側で持つ
value と onValueChange を渡すと、いま何枚目かを画面側が持ちます。枚数の表示や、色を選んだら対応する写真へ飛ばす、といった外からの操作ができるようになります。渡さないときは部品が内部で持ち、defaultIndex が最初の1枚を決めます。
1 / 4 枚目：正面
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| images | { src: string; alt: string }[] | - | Images shown in the main view + thumbnail strip. |
| value | number | - | Controlled active index (omit for internal state). |
| onValueChange | (index: number) => void | - | Active-index change handler. |
| defaultIndex | number | 0 | Initial active index when uncontrolled. |
| thumbnailPosition | "bottom" | "start" | "bottom" | Thumbnail strip position. |
| aspectRatio | "square" | "video" | "auto" | "portrait" | "wide" | "square" | Main image aspect ratio. |
| className | string | - | Additional CSS class names. |
Usage
import { Gallery } from "@gunjo/ui"
const images = [
{ src: "/front.jpg", alt: "Front view" },
{ src: "/side.jpg", alt: "Side view" },
]
export function Example() {
return <Gallery images={images} aspectRatio="square" />
}