EOS UIComponents
Image Group
A responsive collection for presenting related images with compact layouts and count overlays.
Import
import '@eosjs/ui/image-group';Image Group
Use the image group for related images that belong to one visual collection. It delegates image rendering to eos-image while the group controls layout, focus, and count overflow.
The grid and pair layouts keep tiles square based on the rendered row count and center an incomplete last row. An empty group takes no layout space.
The default tile gap is 4px and the corner radius is 5px. Customize them with --eos-image-group-gap and --eos-image-group-radius.
Image group layouts
7 shown · 3 hidden
API
Properties
Generated from custom-elements.json for eos-image-group.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
items | — | — | — |
layout | — | — | — |
max-visible | — | — | — |
Events
| Name | Type | Description |
|---|---|---|
image-click | CustomEvent | — |
Each item is rendered by eos-image; see Image attributes for the complete image property reference.
Events
| Event | When it fires | event.detail |
|---|---|---|
| image-click | A tile is activated | index and item |