tabs

binds state

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

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

Props

bindstateThe state name holding the selected tab's value.required

onactionActions to run after the user switches tabs, e.g. emit:changed. Separate several with ;—

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: tab

For your model

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

  tabs  — A row of tabs that switches between sections. Only the selected tab's content is shown.
    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
    example:
      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."

  tab "<text>"  — One tab inside tabs: its label, and the content shown while it is selected.
    "<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
    example:
      tab "Reviews" value=reviews
        text "4.8 out of 5 from 212 hikers."

More navigation

screen tab breadcrumb pagination

All navigation elements on one page →