SmartLayout
import type { SmartLayout } from 'pixi-silk/ui/layout';A responsive style: base values, then portrait or landscape, then each matching media
rule in order. Rules test the root container’s layout area.
Extends#
Properties#
| Property | Type | Description | Inherited from | Defined in |
|---|---|---|---|---|
alignContent? | AlignContent | Line distribution of a wrapping container. Default stretch. | SmartStyle.alignContent | layout/style.ts:82 |
alignItems? | AlignItems | Cross axis alignment of the children. Default stretch. | SmartStyle.alignItems | layout/style.ts:76 |
alignSelf? | "auto" | AlignItems | Cross axis alignment of this node, over its parent’s alignItems. | SmartStyle.alignSelf | layout/style.ts:78 |
animate? | boolean | Glide this child to new slots. Default the container’s transition. | SmartStyle.animate | ui/layout/flex-container.ts:33 |
aspectRatio? | number | Width divided by height. Sizes the missing axis when only one is known. | SmartStyle.aspectRatio | layout/style.ts:102 |
basis? | Length | Main size before growing or shrinking. Default auto (the width or height, else the content). | SmartStyle.basis | layout/style.ts:88 |
bottom? | Length | Distance from the parent’s bottom edge, for position: 'absolute'. | SmartStyle.bottom | layout/style.ts:108 |
columnGap? | number | Space between columns. Overrides gap. | SmartStyle.columnGap | layout/style.ts:54 |
direction? | FlexDirection | Main axis. Default row. | SmartStyle.direction | layout/style.ts:46 |
display? | "none" | "flex" | none takes the node out of layout: it gets a zero box. Default flex. | SmartStyle.display | layout/style.ts:42 |
fit? | FitMode | How the child scales into its slot. Default none. | SmartStyle.fit | ui/layout/flex-container.ts:17 |
fitAlign? | readonly [number, number] | Where the child sits in its slot, 0 to 1 per axis. Default [0.5, 0.5], the centre. | SmartStyle.fitAlign | ui/layout/flex-container.ts:19 |
gap? | number | Space between items and between lines, in pixels. Default 0. | SmartStyle.gap | layout/style.ts:50 |
grow? | number | Share of the free space this item takes. Default 0. | SmartStyle.grow | layout/style.ts:84 |
height? | Length | Border-box height. Default auto. | SmartStyle.height | layout/style.ts:92 |
inset? | Length | Sets top, right, bottom and left at once. The single sides override it. | SmartStyle.inset | layout/style.ts:112 |
justifyContent? | JustifyContent | Main axis distribution of the free space. Default start. | SmartStyle.justifyContent | layout/style.ts:80 |
landscape? | SmartStyle | Values for a landscape area. | - | ui/layout/flex-container.ts:58 |
left? | Length | Distance from the parent’s left edge, for position: 'absolute'. | SmartStyle.left | layout/style.ts:110 |
margin? | Edges<Length> | Space outside the box. 'auto' takes up free space, which centres or pushes the item. | SmartStyle.margin | layout/style.ts:66 |
marginBottom? | Length | Bottom margin. Overrides margin. | SmartStyle.marginBottom | layout/style.ts:72 |
marginLeft? | Length | Left margin. Overrides margin. | SmartStyle.marginLeft | layout/style.ts:74 |
marginRight? | Length | Right margin. Overrides margin. | SmartStyle.marginRight | layout/style.ts:70 |
marginTop? | Length | Top margin. Overrides margin. | SmartStyle.marginTop | layout/style.ts:68 |
maxHeight? | Length | Largest height. Default none. | SmartStyle.maxHeight | layout/style.ts:100 |
maxScale? | number | Largest fit scale. Default no limit. | SmartStyle.maxScale | ui/layout/flex-container.ts:23 |
maxWidth? | Length | Largest width. Default none. | SmartStyle.maxWidth | layout/style.ts:98 |
measure? | (child: Container, availableWidth: number, availableHeight: number) => Size | Measures the child for the space offered. Default its local bounds, whatever the space. | SmartStyle.measure | ui/layout/flex-container.ts:25 |
media? | readonly MediaRule[] | Width, orientation and breakpoint rules. | - | ui/layout/flex-container.ts:60 |
minHeight? | Length | Smallest height. Default 0. | SmartStyle.minHeight | layout/style.ts:96 |
minScale? | number | Smallest fit scale. With fit: 'scale-down' it is the text shrink-to-fit floor. Default 0. | SmartStyle.minScale | ui/layout/flex-container.ts:21 |
minWidth? | Length | Smallest width. Default 0. | SmartStyle.minWidth | layout/style.ts:94 |
onSize? | (width: number, height: number, child: Container) => void | Called with the slot size whenever it changes, so the child can redraw at that size (a panel background, a bar). A child with onSize and no measure measures as 0 by 0, so give it a size, grow or inset. | SmartStyle.onSize | ui/layout/flex-container.ts:31 |
padding? | Edges<number | `${number}%`> | Space inside the box. Percents are of the parent’s width, as in CSS. | SmartStyle.padding | layout/style.ts:56 |
paddingBottom? | number | `${number}%` | Bottom padding. Overrides padding. | SmartStyle.paddingBottom | layout/style.ts:62 |
paddingLeft? | number | `${number}%` | Left padding. Overrides padding. | SmartStyle.paddingLeft | layout/style.ts:64 |
paddingRight? | number | `${number}%` | Right padding. Overrides padding. | SmartStyle.paddingRight | layout/style.ts:60 |
paddingTop? | number | `${number}%` | Top padding. Overrides padding. | SmartStyle.paddingTop | layout/style.ts:58 |
portrait? | SmartStyle | Values for a portrait area. | - | ui/layout/flex-container.ts:56 |
position? | "relative" | "absolute" | absolute places the node against its parent’s box with top, right, bottom and left. | SmartStyle.position | layout/style.ts:44 |
right? | Length | Distance from the parent’s right edge, for position: 'absolute'. | SmartStyle.right | layout/style.ts:106 |
rowGap? | number | Space between lines (rows). Overrides gap. | SmartStyle.rowGap | layout/style.ts:52 |
shrink? | number | Share of the overflow this item gives up, weighted by its basis. Default 1. | SmartStyle.shrink | layout/style.ts:86 |
top? | Length | Distance from the parent’s top edge, for position: 'absolute'. | SmartStyle.top | layout/style.ts:104 |
width? | Length | Border-box width. Default auto. | SmartStyle.width | layout/style.ts:90 |
wrap? | "nowrap" | "wrap" | "wrap-reverse" | Break items into several lines when they overflow. Default nowrap. | SmartStyle.wrap | layout/style.ts:48 |