精选最新
图片Captioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 个框架初级
Loading…
A main image above a row of thumbnails, the product-gallery pattern, with a selected state.
<div class="mx-auto w-full max-w-md">
<div class="aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
<img src="/images/photo-5.jpg" alt="Leather backpack, front view" class="h-full w-full object-cover" />
</div>
<div class="mt-3 flex gap-2" role="tablist" aria-label="Product images">
<!-- The selected thumb is a pressed toggle, announced via aria-selected. -->
<button type="button" role="tab" aria-selected="true" class="aspect-square w-16 overflow-hidden rounded-lg ring-2 ring-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600">
<img src="/images/thumb-1.jpg" alt="Front view" class="h-full w-full object-cover" />
</button>
<button type="button" role="tab" aria-selected="false" class="aspect-square w-16 overflow-hidden rounded-lg ring-1 ring-gray-200 hover:ring-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:ring-gray-700">
<img src="/images/thumb-2.jpg" alt="Side view" class="h-full w-full object-cover" />
</button>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
images必填 | ThumbImage[] | - | 要渲染的项目数组。 |
activeIndex | number | 0 | Active index |
onSelect | (index: number) => void | - | 用户选择菜单项时触发，参数为所选项。 |
className | string | - | 合并到根元素上的额外类名。 |
The thumbnails are a `role="tablist"` of `role="tab"` buttons, and the selected one is marked with `aria-selected` and a ring, so the control is a real, announced selector rather than a set of look-alike images. Wire `onSelect` to swap the main image. For the vertical variant, move the strip beside the main image with a `flex` row and `flex-col` thumbnails.