Module
Layout
Framework-independent layout, constraints, responsive rules and adaptive alternatives.
Raw schema: /schema/1.0/modules/layout.schema.json
insets
type: dimension | object
No object properties on this definition.
constraint
type: object · required: attribute, relation
| Property | Type | Required | Constraints |
|---|---|---|---|
attribute | "left" | "right" | "top" | "bottom" | "width" | "height" | "center-x" | "center-y" | "baseline" | "aspect-ratio" | yes | — |
relation | "equal" | "less-than-or-equal" | "greater-than-or-equal" | yes | — |
targetRef | id | no | — |
targetAttribute | "left" | "right" | "top" | "bottom" | "width" | "height" | "center-x" | "center-y" | "baseline" | no | — |
constant | dimension | no | — |
multiplier | number | no | — |
priority | integer | no | min 0 · max 1000 |
layout
type: object
| Property | Type | Required | Constraints |
|---|---|---|---|
type | "stack" | "row" | "column" | "grid" | "overlay" | "flow" | "absolute" | "constraint-based" | no | — |
width | size | no | — |
height | size | no | — |
minWidth | size | no | — |
maxWidth | size | no | — |
minHeight | size | no | — |
maxHeight | size | no | — |
gap | dimension | no | — |
rowGap | dimension | no | — |
columnGap | dimension | no | — |
padding | insets | no | — |
margin | insets | no | — |
align | "start" | "end" | "center" | "stretch" | "baseline" | no | — |
justify | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | no | — |
alignSelf | "auto" | "start" | "end" | "center" | "stretch" | "baseline" | no | — |
wrap | "none" | "wrap" | "reverse" | no | — |
columns | integer | array<size> | no | min 1 · minItems 1 |
rows | integer | array<size> | no | min 1 · minItems 1 |
column | integer | no | min 1 |
row | integer | no | min 1 |
columnSpan | integer | no | min 1 |
rowSpan | integer | no | min 1 |
grow | number | no | min 0 |
shrink | number | no | min 0 |
basis | size | no | — |
aspectRatio | number | no | > 0 |
position | "flow" | "relative" | "absolute" | "fixed" | "sticky" | no | — |
inset | insets | no | — |
zIndex | integer | no | — |
clip | boolean | no | — |
overflow | "visible" | "hidden" | "clip" | "scroll" | "auto" | no | — |
scroll | object | no | — |
constraints | array<constraint> | no | — |
safeArea | boolean | no | — |
direction | "ltr" | "rtl" | no | — |
extensions | extensions | no | — |
query
type: object
| Property | Type | Required | Constraints |
|---|---|---|---|
minWidth | number | no | min 0 |
maxWidth | number | no | min 0 |
minHeight | number | no | min 0 |
maxHeight | number | no | min 0 |
orientation | "portrait" | "landscape" | no | — |
minAspectRatio | number | no | min 0 |
maxAspectRatio | number | no | min 0 |
pixelDensity | number | no | min 0 |
inputModality | "pointer" | "touch" | "keyboard" | "voice" | "gamepad" | "spatial" | no | — |
windowClass | "compact" | "medium" | "expanded" | no | — |
platform | taxonomy | no | — |
capabilities | array<taxonomy> | no | — |
containerRef | id | no | — |
safeArea | boolean | no | — |
responsive
type: object · required: strategy, rules
| Property | Type | Required | Constraints |
|---|---|---|---|
strategy | "responsive" | "adaptive" | yes | — |
rules | array<object> | yes | minItems 1 |