Gallery
Gallery is an image viewer with zoom, rotate, flip and download capabilities.
Gallery provides a composition-based API with sub-components for full control over the layout. Each part of the gallery (header, content, footer, toolbar, thumbnails) is a separate component.
Usage #
Examples #
Basic #
Gallery provides a composition-based API with sub-components for full control over the layout. Each part of the gallery (header, content, footer, toolbar, thumbnails) is a separate component.
Grid #
Gallery can be used as a lightbox by combining it with a grid of thumbnails. Click on an image to open the gallery in fullscreen overlay.
Accessibility #
Screen Reader
Gallery uses semantic button elements for all interactive controls. The data-scope and data-part attributes identify each part of the gallery for assistive technologies. Use aria-label attributes on buttons to provide accessible names.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus between interactive elements. |
| enter | Activates the focused button (zoom, rotate, flip, navigate, etc.). |
| space | Activates the focused button. |
