Dimensional adaptation of Client Components
adapt controls how size changes during initial appearance or SSRT replacement. It is independent of hydrate (when the assembly begins) and transition (input and output CSS effects).
<@Panel hydrate="visible" transition="fade" adapt="bottom-right">
<div>Cargando panel...</div>
</@Panel>
<@Panel hydrate="visible" adapt="bottom" />| Value | Width | Stop | Visual anchorage |
|---|---|---|---|
top | Immediate | Animated | Up |
bottom | Immediate | Animated | Down |
left | Animated | Immediate | Left |
right | Animated | Immediate | Right |
vertical-center | Immediate | Animated | Vertical center |
horizontal-center | Animated | Immediate | Horizontal centre |
top-left | Animated | Animated | Left upper |
top-right | Animated | Animated | Right upper |
bottom-left | Animated | Animated | Lower left |
bottom-right | Animated | Animated | Lower right |
center | Animated | Animated | The centre of both axes |
none | Immediate | Immediate | No dimensional animation |
The anchorage reveals the content within its final position in the layout. It does not set the original edge of the SSRT on display or change the final position of the component. The contraction inverts the path by retaining the anchorage.
Each non-animated axis immediately adopts its final dimension: it never waits for the previous dimension of the SSRT. The animated axes start from the size of the SSRT, or from zero when there is no SSRT. Dimension animation lasts 220 ms. CSS effects can last a different time.
If omitted adapt, the previous behavior is preserved: top-left with SSRT and top without SSRT. adapt="none" conserves the effects of transition.
Validation and editor
It is only allowed in tags <@Component>, with or without SSRT. Accepts only one of the twelve literals of the table, respecting capital and lower case. It does not support expressions, combined values, boolean attribute or duplicate statements.
// Inválidos
<@Panel adapt="top-center" />
<@Panel adapt="vertical-bottom" />
<@Panel adapt="Top-Left" />
<@Panel adapt={{ direction }} />
<@Panel adapt="top" adapt="left" />The compiler and LSP share the same validation. Autocomplete offers all twelve supported values. adapt is a GOX control: it is issued as data-adapt and is not transferred to the props of the framework.
The frame is mounted only once. The adaptation does not move its root or restart its state. At the end, the internal containers use display: contentsas explained in Transition.
See also: Hydrate, Transition, SSRT, Isolate.