Media Viewer — Playground
messages
private readonly openViewer = kuiMediaViewer();
protected open(): void {
this.openViewer({
items: this.photos,
onIndexChange: (index) => this.lastViewed.set(index),
});
}Media viewer events
- No events yet.
| Name | Type | Default | Description |
|---|---|---|---|
| kuiMediaViewer() | () => (data: KuiMediaViewerData) => Observable<void | undefined> | - | Returns the opener. Call it in an injection context (a constructor or field initializer), like kuiDialog(). The Observable completes when the lightbox closes (Close, Escape or backdrop) and carries no value. |
| items | readonly KuiMediaViewerItem[] | - | Required. Photos to browse, at least one. A single item hides the counter, Prev, Next and the thumbnail strip, leaving zoom and Close. |
| index | number | undefined | 0 | Index to open on, clamped to the valid range. |
| maxZoom | number | undefined | 3 | Upper zoom bound. |
| zoomStep | number | undefined | 0.5 | Zoom increment per Zoom in or Zoom out click and per wheel event. |
| ariaLabel | string | undefined | mediaViewer.label message | Base accessible name of the lightbox (Photo viewer). The position, photo N of total, is appended automatically. |
| messages | Partial<KuiMediaViewerMessages> | undefined | undefined | Text overrides for this viewer: name, zoom, close, previous, next, thumbnail, position and load error texts. They win over scoped and root messages. |
| onIndexChange | (index: number) => void | - | Called once on open with the clamped initial index and on every Prev, Next, thumbnail or keyboard navigation. |
| KuiMediaViewerItem.id | string | undefined | src | Stable identifier for tracking and thumbnail keys. Pass it only when two items can share a src. |
| KuiMediaViewerItem.src | string | - | Image URL. The viewer never fetches or transforms it. |
| KuiMediaViewerItem.alt | string | - | Alt text. Required; pass an empty string explicitly for a decorative photo. |
| KuiDialogSize "fullscreen" | dialog size | - | The panel is a KuiDialog with the fullscreen size, which any dialog content may also request. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.