01
Overview
An accessible viewport for panning and zooming images, SVGs, and Mermaid diagrams.
02
When to use
Use when
- Viewing large images or SVG diagrams that need pointer and keyboard navigation.
Avoid when
- Showing ordinary responsive media that does not need a viewport transform.
03
Examples
Basic zoom and pan viewer
Inspect a large surface with pointer zoom and pan controls.
04
Props
Name | Type | Default | Description |
|---|---|---|---|
children required | snippet | ||
scale bindable | number | 1 | |
onTransformChange | (transform: { scale: number; x: number; y: number }) => void | ||
ariaLabel | text | 'Zoomable viewer' | |
onkeydown | KeyboardEventHandler<T>undefinednull | ||
onwheel | WheelEventHandler<T> | undefined | null | ||
onpointerdown | PointerEventHandler<T>undefinednull | ||
onpointermove | PointerEventHandler<T>undefinednull | ||
onpointerup | PointerEventHandler<T>undefinednull | ||
onpointercancel | PointerEventHandler<T>undefinednull |