Skip to main content

Layout

Layout container supporting multiple layout modes.

Layout Modes​

ModeDescription
columnVertical layout
rowHorizontal layout
gridGrid layout

Layout Properties​

layout​

layout: Signal<'column' | 'row', this>;

Arrangement direction.

gap​

gap: SpacingSignal<this>;

Spacing.

padding​

padding: SpacingSignal<this>;

Inner padding.

alignment​

alignment: Alignment;

Alignment method.

Alignment Properties​

alignItems​

alignItems: AlignmentSignal<this>;

Item alignment.

alignContent​

alignContent: AlignmentSignal<this>;

Content alignment.

textAlign​

textAlign: Signal<CanvasTextAlign>;

Text alignment.

textDirection​

textDirection: Signal<CanvasDirection>;

Text direction.

textWrap​

textWrap: Signal<boolean>;

Text wrapping.

lineHeight​

lineHeight: Signal<number>;

Line height.

Direction Properties​

top​

top: SimpleSignal<number, this>;

Top position.

bottom​

bottom: SimpleSignal<number, this>;

Bottom position.

left​

left: SimpleSignal<number, this>;

Left position.

right: SimpleSignal<number, this>;

Right position.

middle​

middle: Vector2Signal<this>;

Center point.

topLeft​

topLeft: Vector2Signal<this>;

Top-left corner.

topRight​

topRight: Vector2Signal<this>;

Top-right corner.

bottomLeft​

bottomLeft: Vector2Signal<this>;

Bottom-left corner.

bottomRight​

bottomRight: Vector2Signal<this>;

Bottom-right corner.

Examples​

import {Layout, Circle, Rect} from '@wangyaoshen/locus';

const layout = new Layout({
  layout: 'column',
  gap: 20,
  alignment: 'center',
});

layout.add(
  new Circle({radius: 50}),
  new Rect({width: 100, height: 50}),
  new Circle({radius: 30}),
);