EOS UIScene
A coordinate space for content and positioned overlays.
Import
import '@eosjs/ui/scene';Basic usage
eos-scene provides a content area and a shared coordinate space for its eos-scene-item children. Items can contain any slotted content, such as markers, labels, cards, or masks.
Scene with multiple overlays
点击标记查看详情，再次点击收起。可在预览区域滚动缩放、拖动图片移动；点“添加调试标记”输入名称后，在图片上选点并拖动微调。
Click a marker to open its callout. Click it again to close it. The example reuses the Litang landscape image from the Image docs. Use the external + and − buttons to scale the demo container, or drag the image to move it. The markers stay aligned to their image coordinates.
Coordinates and resizing
x and y are normalized coordinates from 0 to 1, with the origin at the top left of the scene. They are resolved against the scene's content area, so items remain aligned to the same relative point when the scene or its parent changes size or position. They do not depend on the document or viewport position. The demo controls apply transforms to an outer wrapper; eos-scene only provides the coordinate space.
When positioning items over an image, match the scene aspect ratio to the image content so object-fit: cover does not crop the coordinate space. anchor chooses which edge, corner, or center of an item aligns with its coordinate. Use z-index to order overlapping items.
Attributes
eos-scene
| Attribute | Type | Default | Description |
|---|---|---|---|
aria-label | string | Scene content | Accessible name for the scene content |
The scene also supports --eos-scene-aspect-ratio (default 16 / 9) and --eos-scene-radius (default 16px).
eos-scene-item
| Attribute | Type | Default | Description |
|---|---|---|---|
x / y | number | 0.5 | Normalized scene coordinates from 0 to 1 |
anchor | center | top-left | top | top-right | right | bottom-right | bottom | bottom-left | left | center | Align this edge, corner, or center to the coordinate |
z-index | number | 1 | Stacking order among scene items |
Native events from buttons, links, and other slotted content keep their original event names and objects.