smudgy
scriptref:widgets:layout

Table of Contents

smudgy:widgets — Layout & overlays

Generated from smudgy v0.5.6 (smudgy-widgets.d.ts @ 1859aed10d75). Index: scriptref.

Arrange, size, scroll, and layer widget content. These components do not collect form values; they determine where other components appear.

For mounting and shared size types, see Widget overview.

Column

export function Column(props?: ColumnProps, children?: WidgetChildren): SmudgyElement;

A vertical layout. Children are laid out top-to-bottom.

ColumnProps

export interface ColumnProps {
    width?: Bindable<WidgetLength>;
    height?: Bindable<WidgetLength>;
    spacing?: Bindable<number>;
    padding?: Bindable<number>;
    children?: WidgetChildren;
}

Props common to the linear layout containers.

  • spacing — Gap between children, in pixels.
  • padding — Padding around the children, in pixels.

Row

export function Row(props?: RowProps, children?: WidgetChildren): SmudgyElement;

A horizontal layout. Children are laid out left-to-right.

RowProps

export type RowProps = ColumnProps;

The same layout properties as ColumnProps.

Stack

export function Stack(props?: StackProps, children?: WidgetChildren): SmudgyElement;

A layering layout. Children are stacked front-to-back.

StackProps

export interface StackProps {
    width?: Bindable<WidgetLength>;
    height?: Bindable<WidgetLength>;
    children?: WidgetChildren;
}

Props for the layering container (children stack front-to-back).

Container

export function Container(props?: ContainerProps, children?: WidgetChildren): SmudgyElement;

A single-child wrapper with alignment/background. Only the first child is used.

ContainerProps

export interface ContainerProps {
    width?: Bindable<WidgetLength>;
    height?: Bindable<WidgetLength>;
    align_x?: HorizontalAlign;
    align_y?: VerticalAlign;
    background?: Bindable<string>;
    children?: WidgetChildren;
}

Props for the single-child wrapper. Only the first child is used.

  • background — A CSS color string for the background.

Space

export function Space(props?: SpaceProps, children?: WidgetChildren): SmudgyElement;

Empty layout space (use width="fill" as a flexible spacer).

SpaceProps

export interface SpaceProps {
    width?: Bindable<WidgetLength>;
    height?: Bindable<WidgetLength>;
    children?: WidgetChildren;
}

Props for empty layout space (a leaf; children are ignored). Place <Space width="fill"/> between Row children to create a flexible gap.

  • width — Default “shrink”.
  • height — Default “shrink”.

Scrollable

export function Scrollable(props?: ScrollableProps, children?: WidgetChildren): SmudgyElement;

A scrollable single-child viewport. Only the first child is used.

ScrollableProps

export interface ScrollableProps {
    width?: Bindable<WidgetLength>;
    height?: Bindable<WidgetLength>;
    direction?: ScrollDirection;
    anchor?: "start" | "end";
    children?: WidgetChildren;
}

Props for a scrollable single-child viewport. Only the first child is used.

  • direction — Scroll axis. Default “vertical”.
  • anchor — Where the view rests. “end” sticks to the bottom (or right, when horizontal) so growing content keeps its newest line visible. Default “start”.
smudgy