smudgy:widgets — Layout & overlays

Generated from smudgy v0.4.2-dev (smudgy-widgets.d.ts @ e96061b683ea). 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.

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

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

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.

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

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

export type RowProps = ColumnProps;

The same layout properties as ColumnProps.

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

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

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

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

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

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

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.

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

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

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”.

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

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

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”.

export type ScrollDirection = "vertical" | "horizontal" | "both";

A scroll axis. Vertical by default.

export function Modal(props?: ModalProps, children?: WidgetChildren): SmudgyElement;

A modal: a dimmed, input-blocking backdrop under a centered single child.

export interface ModalProps {
    onDismiss?: () => void;
    background?: Bindable<string>;
    children?: WidgetChildren;
}

Props for a modal: a dimmed, input-blocking backdrop under a centered content box. The single child is the content box (style it with a Container).

• onDismiss — Called when the backdrop is clicked. If omitted, the backdrop blocks input but does not dismiss.
• background — A CSS color string for the backdrop. Default translucent black.

Script API reference · ← smudgy:widgets — Overview · smudgy:widgets — Controls → · Scripting manual