ギャラリーGalleryExperimental
Main image plus a selectable thumbnail strip with click and keyboard swap, for product detail and media galleries.
プレビュー
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" />
}