Navigation components

Screens, tabs, breadcrumbs and pagination.

Generated from the component definitions in src/components, the same source the parser validates against and the model guide is built from. Every element also accepts if=, tip=. Each example below is rendered live by the SayShape engine.

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.

Prop	Type	Description
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: root.

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

Rendered by the SayShape engineOpen in playground

Try screen interactively →

tabs

A row of tabs that switches between sections. Only the selected tab's content is shown.

Prop	Type	Description
bind	state, required	The state name holding the selected tab's value.
on	action	Actions to run after the user switches tabs, e.g. emit:changed. Separate several with ;

Children: tab.

state view=overview
tabs bind=view
  tab "Overview" value=overview
    text "Light, quick-drying trail runners."
  tab "Specs" value=specs
    text "280 g, 6 mm drop."

Rendered by the SayShape engineOpen in playground

Try tabs interactively →

tab

One tab inside tabs: its label, and the content shown while it is selected.

Prop	Type	Description
"text"	text, required	The tab's label.
value	string	What the tabs' bind= holds while this tab is selected (default: the label).
gap	number	Space between children in pixels (default 12).

Children: any elements.

Only inside: tabs.

state view=overview
tabs bind=view
  tab "Reviews" value=reviews
    text "4.8 out of 5 from 212 hikers."

Rendered by the SayShape engineOpen in playground

Try tab interactively →

breadcrumb

Where the user is, as a path like Shop / Shoes / Trail runners. Earlier steps can be pressed to go back.

Prop	Type	Description
"text"	text, required	The steps, separated by slashes. The last one is the current page.
bind	state	State that receives the pressed step's text.
on	action	Actions to run after a step is pressed, e.g. emit:changed. Separate several with ;

state at="Trail runners"
breadcrumb "Shop / Shoes / Trail runners" bind=at

Rendered by the SayShape engineOpen in playground

Try breadcrumb interactively →

pagination

Previous, next and page-number buttons for moving through pages of results. Show the current page's items with slice(rows, (page - 1) * 10, page * 10).

Prop	Type	Description
bind	state, required	The number state holding the current page, starting at 1.
pages	number, required	How many pages there are, e.g. pages={ceil(len(rows) / 10)}.
on	action	Actions to run after the page changes, e.g. emit:changed. Separate several with ;

state page=3
pagination bind=page pages=12

Rendered by the SayShape engineOpen in playground

Try pagination interactively →