Layout
Layout container supporting multiple layout modes.
Layout Modes
| Mode | Description |
|---|---|
column | Vertical layout |
row | Horizontal layout |
grid | Grid 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
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}),
);