SmartStyle
import type { SmartStyle } from 'pixi-silk/ui/layout';A flex style plus how a child sits in its slot.
Extends#
Extended by#
Properties#
| Property | Type | Description | Inherited from | Defined in |
|---|---|---|---|---|
alignContent? | AlignContent | Line distribution of a wrapping container. Default stretch. | LayoutStyle.alignContent | layout/style.ts:82 |
alignItems? | AlignItems | Cross axis alignment of the children. Default stretch. | LayoutStyle.alignItems | layout/style.ts:76 |
alignSelf? | "auto" | AlignItems | Cross axis alignment of this node, over its parent’s alignItems. | LayoutStyle.alignSelf | layout/style.ts:78 |
animate? | boolean | Glide this child to new slots. Default the container’s transition. | - | ui/layout/flex-container.ts:33 |
aspectRatio? | number | Width divided by height. Sizes the missing axis when only one is known. | LayoutStyle.aspectRatio | layout/style.ts:102 |
basis? | Length | Main size before growing or shrinking. Default auto (the width or height, else the content). | LayoutStyle.basis | layout/style.ts:88 |
bottom? | Length | Distance from the parent’s bottom edge, for position: 'absolute'. | LayoutStyle.bottom | layout/style.ts:108 |
columnGap? | number | Space between columns. Overrides gap. | LayoutStyle.columnGap | layout/style.ts:54 |
direction? | FlexDirection | Main axis. Default row. | LayoutStyle.direction | layout/style.ts:46 |
display? | "none" | "flex" | none takes the node out of layout: it gets a zero box. Default flex. | LayoutStyle.display | layout/style.ts:42 |
fit? | FitMode | How the child scales into its slot. Default none. | - | 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. | - | ui/layout/flex-container.ts:19 |
gap? | number | Space between items and between lines, in pixels. Default 0. | LayoutStyle.gap | layout/style.ts:50 |
grow? | number | Share of the free space this item takes. Default 0. | LayoutStyle.grow | layout/style.ts:84 |
height? | Length | Border-box height. Default auto. | LayoutStyle.height | layout/style.ts:92 |
inset? | Length | Sets top, right, bottom and left at once. The single sides override it. | LayoutStyle.inset | layout/style.ts:112 |
justifyContent? | JustifyContent | Main axis distribution of the free space. Default start. | LayoutStyle.justifyContent | layout/style.ts:80 |
left? | Length | Distance from the parent’s left edge, for position: 'absolute'. | LayoutStyle.left | layout/style.ts:110 |
margin? | Edges<Length> | Space outside the box. 'auto' takes up free space, which centres or pushes the item. | LayoutStyle.margin | layout/style.ts:66 |
marginBottom? | Length | Bottom margin. Overrides margin. | LayoutStyle.marginBottom | layout/style.ts:72 |
marginLeft? | Length | Left margin. Overrides margin. | LayoutStyle.marginLeft | layout/style.ts:74 |
marginRight? | Length | Right margin. Overrides margin. | LayoutStyle.marginRight | layout/style.ts:70 |
marginTop? | Length | Top margin. Overrides margin. | LayoutStyle.marginTop | layout/style.ts:68 |
maxHeight? | Length | Largest height. Default none. | LayoutStyle.maxHeight | layout/style.ts:100 |
maxScale? | number | Largest fit scale. Default no limit. | - | ui/layout/flex-container.ts:23 |
maxWidth? | Length | Largest width. Default none. | LayoutStyle.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. | - | ui/layout/flex-container.ts:25 |
minHeight? | Length | Smallest height. Default 0. | LayoutStyle.minHeight | layout/style.ts:96 |
minScale? | number | Smallest fit scale. With fit: 'scale-down' it is the text shrink-to-fit floor. Default 0. | - | ui/layout/flex-container.ts:21 |
minWidth? | Length | Smallest width. Default 0. | LayoutStyle.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. | - | ui/layout/flex-container.ts:31 |
padding? | Edges<number | `${number}%`> | Space inside the box. Percents are of the parent’s width, as in CSS. | LayoutStyle.padding | layout/style.ts:56 |
paddingBottom? | number | `${number}%` | Bottom padding. Overrides padding. | LayoutStyle.paddingBottom | layout/style.ts:62 |
paddingLeft? | number | `${number}%` | Left padding. Overrides padding. | LayoutStyle.paddingLeft | layout/style.ts:64 |
paddingRight? | number | `${number}%` | Right padding. Overrides padding. | LayoutStyle.paddingRight | layout/style.ts:60 |
paddingTop? | number | `${number}%` | Top padding. Overrides padding. | LayoutStyle.paddingTop | layout/style.ts:58 |
position? | "relative" | "absolute" | absolute places the node against its parent’s box with top, right, bottom and left. | LayoutStyle.position | layout/style.ts:44 |
right? | Length | Distance from the parent’s right edge, for position: 'absolute'. | LayoutStyle.right | layout/style.ts:106 |
rowGap? | number | Space between lines (rows). Overrides gap. | LayoutStyle.rowGap | layout/style.ts:52 |
shrink? | number | Share of the overflow this item gives up, weighted by its basis. Default 1. | LayoutStyle.shrink | layout/style.ts:86 |
top? | Length | Distance from the parent’s top edge, for position: 'absolute'. | LayoutStyle.top | layout/style.ts:104 |
width? | Length | Border-box width. Default auto. | LayoutStyle.width | layout/style.ts:90 |
wrap? | "nowrap" | "wrap" | "wrap-reverse" | Break items into several lines when they overflow. Default nowrap. | LayoutStyle.wrap | layout/style.ts:48 |