Modules · Interface · Ui
Buttons, layout, forms and the rest of the interface toolkit. Ui is a reactive component library: every function emits a piece of the interface into an enclosing tree, and most container components take a block of nested content built from more Ui calls. It spans layout ( Ui.Layout.Column , Ui.Layout.Grid ), content and inputs, buttons that write directly to state , overlays and popups, a full form and validation system, and a theming model. Component names are sub-namespaced — Ui.Content.Text , Ui.Button.Integer.Increment — grouping related pieces.
A single UI component: a component name plus its attributes map, the generic node every Ui component emits.
The result for one form field: its previous value and any validation error.
The outcome of a form: a status, a message, optional per-field results and an optional error code.
One item bound for a named overlay container: its target name and its content tree.
A background style: gradient fill, border radius, colour and width, and inner padding.
The styling for a button: its label text style and its background style.
A complete theme: named variants, a default variant and optional nested-title styling.
A colour gradient: a primary colour and an optional second colour for a two-stop blend.
The styling for a form input across normal and error states, plus label, error text and spacing.
A paired text and background style.
A text style: colour gradient, font, size and the bold, italic, underline, caps and alignment flags.
One theme variant: title and body text styles, child variant names, a background and spacing.
Marks its block disabled when the flag is yes.
A block of nested content run inside this component.
Returns nothing — emits the component into the surrounding UI tree.
Marks its block enabled when the flag is yes.
Whether the surrounding region is currently disabled.
Returns Logic.Maybe — yes when the enclosing region is disabled.
Whether the surrounding region is currently enabled.
Returns Logic.Maybe — yes when the enclosing region is enabled.
Adds a named attribute to the component currently being built.
Returns nothing — records one attribute on the enclosing Ui.Component .
A button that inserts a value at an index of an array state.
The button's label content.
A button that removes the last element of an array state.
A button that appends a value to an array state.
A button that removes the element at an index of an array state.
A button that swaps two elements of an array state.
A button that sets a boolean state to no.
A button that flips a boolean state between yes and no.
A button that sets a boolean state to yes.
A permanently disabled button.
A button that adds an amount to an integer state.
A button that subtracts one from an integer state.
A button that adds one to an integer state.
A button that subtracts an amount from an integer state.
A button that adds an amount to a real state.
A button that subtracts an amount from a real state.
A button that sets a state cell to a value when pressed.
Makes its content set a state cell to a value when tapped.
The tappable content.
Creates and emits a UI component, gathering attributes and children from its block.
The block, where Ui.Attribute calls and child components are gathered.
Wraps its block in a plain content area.
Shows a named icon inline.
Shows an image at an optional size.
Wraps its block in a themed panel container.
Wraps its block in a themed section container.
Shows a run of body text, joining any extra fragments.
Shows a heading, joining any extra fragments.
Opens a form bound to a result state, with submission handled by a reverse.
Two blocks: the form fields, then the submit content.
A form field with a custom input and validation block.
Two blocks: the input, which receives a valueBinding , then validation, which receives the optionalValue .
A checkbox form field.
A email form field with an optional validation block.
Validation rules for the field, receiving the field's optionalValue .
A hidden form field carrying a fixed value.
A image form field with an optional validation block.
A number form field with an optional validation block.
Treats an empty string as absent, for optional field values.
Returns Collection.Optional(Text) — the value, or none when it is empty.
A password form field with an optional validation block.
A phone number form field with an optional validation block.
A read-only form field with an optional validation block.
A text form field with an optional validation block.
A multi-line text form field with an optional validation block.
A submit button for the enclosing form.
Fails when the value is above a maximum.
Returns nothing — records the error on the field when the check fails.
Fails when the value is below a minimum.
Fails when the value is not positive.
Fails validation when the value is absent or empty.
Returns nothing — records the error on the field when the value is missing.
Fails when the text has characters outside an allowed set.
Fails when the text is not a valid email address.
Fails when the text is longer than a maximum length.
Fails when the text is shorter than a minimum length.
Fails when the text does not match a pattern.
Draws the built-in add icon.
Draws the built-in back icon.
Draws the built-in blank icon.
Draws the built-in close icon.
Draws the built-in delete icon.
Draws the built-in edit icon.
Draws the built-in forward icon.
Draws the built-in home icon.
Draws the built-in menu icon.
Draws the built-in profile icon.
Draws the built-in search icon.
Draws the built-in settings icon.
A checkbox input bound to a text state.
Wraps its block in the standard input frame styling.
A number input bound to a real state.
A password input bound to a text state.
A text input bound to a text state.
A textarea input bound to a text state.
Lays out its block as a column.
Lays out its block as a grid with a fixed column count.
Constrains its block to a fixed height.
Offsets its block to a position within a stack.
Lays out its block as a row.
Lays out its block as a scrollable.
Constrains its block to a fixed width and height.
Lays out its block as a stack.
Lays out its block as a stretch.
Constrains its block to a fixed width.
Shows the loading overlay while a value is still resolving.
Marks its block as the region a loading overlay covers.
Runs its block only when the condition is yes, keeping lock state for loading.
The content shown when condition is yes.
Runs its block only when the condition is no.
The content shown when condition is no.
Runs its block with the unwrapped value when the optional is present.
The content run when the value is present; the block receives the unwrapped value .
Runs its block when the optional is absent.
The content run when the value is absent.
Shows a dimmed overlay backdrop when visible is yes.
Opens a named overlay container that gathers matching items.
The container's base content; overlay items target it by name.
Sends its block to the named overlay container.
The overlay item content.
Sends its block to a container only while visible is yes.
Marks its block as the region popups render over.
Shows a popup dialog while a state is yes.
Two blocks: the popup header, then its body content.
Marks its block as a status region.
Shows its block styled as an error.
Shows its block styled as an error only when the condition is yes.
Shows its block styled as an informational note.
Shows its block styled as a success.
Applies a theme to its block.
The content the theme applies to.
Switches to a named variant of the current theme for its block.
The content the variant applies to.