pixi-silk/ui/layout

SmartContainer and FlexContainer: place and scale a design box in the window, flex children inside it.

import { FlexContainer, SimulatedViewport, SmartContainer, DEVICES } from 'pixi-silk/ui/layout';

Classes#

Class	Description
FlexContainer	A container that lays out its children with flexbox. Give a child a style with FlexContainer.setLayout (or add it with FlexContainer.add). The container places it in its slot once per frame, and only after something changed: a child added, removed or restyled, a new size, or FlexContainer.invalidate.
SimulatedViewport	Previews a window size inside a desktop page: a device of that size, scaled down to fit an area (letterboxed), with a bezel and a mask. Add SmartContainers to SimulatedViewport.content and pass the simulator itself as their `viewport`: it is a signal of the device’s window, so they lay out as they would on that device.
SmartContainer	A responsive container for portrait and landscape screens. It places and scales itself in the window from layout records against a reference resolution. A record has a design box, a reference resolution it fits or covers, an alignment, and optional stretch and corrections. It picks `portraitData` when the window is taller than wide, `landscapeData` otherwise, or the first matching named breakpoint.

Interface	Description
Breakpoint	A named layout record that applies when `when` returns true for the window size.
FlexContainerOptions	Options of FlexContainer.
Insets	Distances from the window edges, in screen pixels: notches, rounded corners, home bars.
LayoutData	Where a SmartContainer sits on screen and how it scales, for one breakpoint. The box is in design units, and the reference resolution sets how design units map to the window.
LayoutDebug	The handle layoutDebug returns.
LayoutDebugOptions	Options of layoutDebug.
MediaRule	A style that applies when the root’s layout area, or the root SmartContainer’s breakpoint, matches.
Placement	Where placeBox put a design box: position and scale in the window’s space, and the box size.
SimulatedViewportOptions	Options of SimulatedViewport.
SmartContainerOptions	Options of SmartContainer.
SmartLayout	A responsive style: base values, then `portrait` or `landscape`, then each matching `media` rule in order. Rules test the root container’s layout area.
SmartStyle	A flex style plus how a child sits in its slot.
ViewportRect	A window rectangle in screen pixels.

Type Alias	Description
FitMode	How a child scales into its slot, as CSS `object-fit`. `none` keeps its size, `contain` fits inside, `cover` fills and overflows, `scale-down` is `contain` that never enlarges, `fill` stretches both axes.
ViewportSource	What a SmartContainer follows: an Application or a renderer (it updates on their `resize`), a signal of a rectangle (it updates on change), or a plain rectangle (call `updateContainer()`).

Variable	Description
DEVICES	Window sizes to preview, in CSS pixels.

Function	Description
fitScale	The [x, y] scale of a child of natural size `w` by `h` in a slot, for a fit mode. [1, 1] for `none` or an empty child.
layoutDebug	A debug overlay for SmartContainers and FlexContainers, off by default. It draws over the whole stage, in screen pixels:
placeBox	Where a record puts its box in a window: the fit scale of the window to the reference resolution, then stretch per axis, then the corrections, then the alignment. Pure, so you can check a layout record without a renderer. Writes into `out` when given, else returns a new object.
simulateViewport	Creates a SimulatedViewport. Same as `new SimulatedViewport(options)`.
wrapText	A `measure` that wraps a text child to the width offered: Pixi `Text` (through its style) or `SilkText`. Long copy then breaks into lines instead of overflowing its slot. It turns on the child’s `wordWrap` and sets `wordWrapWidth`. Other children are measured by their bounds.