Lightbox
@stellaria/nebula-webLightboxPropsPreview
Props
13| Prop | Type | Default |
|---|---|---|
className | string | — |
defaultIndex | number | 0 |
images required | readonly LightboxImage[] | — |
index | number | — |
labels | Partial<LightboxLabels> | — |
maxZoom | number | 4 |
onClose required | () => void | — |
onIndexChange | ((index: number) => void) | — |
opened required | boolean | — |
slideshowInterval | number | 4000 |
withSlideshow | boolean | false |
withThumbnails | boolean | false |
withZoom | boolean | true |
Slot props
10Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
barProps The control bar. | BoxSlotProps | — |
captionProps The image caption, when it has one. | TextSlotProps | — |
counterProps The position counter. | TextSlotProps | — |
emptyProps The empty-gallery notice. It replaces everything else when there are no images. | TextSlotProps | — |
filmstripProps The thumbnail strip. Only with `withThumbnails` and more than one image. | BoxSlotProps | — |
groupProps Each group in the bar. It spreads over BOTH, the navigation one and the zoom one. | BoxSlotProps | — |
imageProps The image. It carries `data-panning`, which is what changes its cursor while dragging. | Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> | — |
stageProps The stage the image lives on. It carries the focus and the zoom gestures. | BoxSlotProps | — |
thumbImageProps The image of each thumbnail. | Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> | — |
thumbProps Every thumbnail. It spreads over all of them; the current one carries `aria-current`. | Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | — |
Also accepts
On top of its own props, this component forwards these groups.