Placement
Anchor the widget within the viewport or container using a 3x3 grid model.
Placement anchors the widget within its positioning context using a 3×3 grid — each position is a combination of a vertical row and a horizontal column. It works with both fixed and absolute positioning and defaults to bottom-end.
Available values
| Value | Position |
|---|---|
top-start | Top left |
top-center | Top center |
top-end | Top right |
middle-start | Middle left |
middle-center | Center |
middle-end | Middle right |
bottom-start | Bottom left |
bottom-center | Bottom center |
bottom-end | Bottom right (default) |
Example
import {
useScena,
ComponentSize,
ComponentShape,
ComponentPosition,
ComponentPlacement,
} from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
await scena.mount({
video: { src: '/video.mp4' },
size: ComponentSize.XS,
shape: ComponentShape.CIRCLE,
container: {
position: ComponentPosition.ABSOLUTE,
placement: ComponentPlacement.MIDDLE_CENTER,
},
});
Runtime
import { useScena, ComponentPlacement } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
const instance = await scena.mount({
video: { src: '/video.mp4' },
});
instance.config.mergeConfig({
container: { placement: ComponentPlacement.TOP_END },
});