screen

inside root

One screen of a multi-screen interface. Only one screen shows at a time: the first, until a button runs go:name or back.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the propstitle

gap

Props

namenameThe screen's name, used by go:name. The visible screen's name is in {screen}.required

titlestringA heading shown at the top of the screen.—

gapnumberSpace between children in pixels (default 14).14

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Children: any elements.

Only inside: the top level

For your model

The exact guide entry a model gets for screen, generated from the same definition.

  screen  — One screen of a multi-screen interface. Only one screen shows at a time: the first, until a button runs go:name or back.
    name=<name, required>  The screen's name, used by go:name. The visible screen's name is in {screen}.
    title=<string>  A heading shown at the top of the screen.
    gap=<number>  Space between children in pixels (default 14).
    children: any elements
    only inside: the top level
    example:
      screen name=cart title="Your cart"
        text "2 items"
        button "Checkout" on=go:checkout
      screen name=checkout title="Checkout"
        text "Pay with card"
        button "Back to cart" variant=secondary on=back

More navigation

tabs tab breadcrumb pagination

All navigation elements on one page →