carousel

binds state

Cards side by side, a page at a time, with arrows and dots: a few options to browse, like products, hotels or recipes. Put a card per option inside it (or each over a list).

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

min

220

gap

Props

bindstateThe state name holding the page shown, starting at 0.required

minnumberThe narrowest a card may be (default 220); as many fit side by side as the width allows.220

gapnumberSpace between children in pixels (default 12).12

onactionActions to run after the page changes, 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: any elements.

For your model

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

  carousel  — Cards side by side, a page at a time, with arrows and dots: a few options to browse, like products, hotels or recipes. Put a card per option inside it (or each over a list).
    bind=<state, required>  The state name holding the page shown, starting at 0.
    min=<number>  The narrowest a card may be (default 220); as many fit side by side as the width allows.
    gap=<number>  Space between children in pixels (default 12).
    on=<action>  Actions to run after the page changes, e.g. emit:changed. Separate several with ;
    children: any elements
    example:
      state page=0
      carousel bind=page
        card
          text "Desert Rose Inn" style=lead weight=semibold
          text "$189 a night · 4.6 stars" tone=muted
        card
          text "Saguaro Lodge" style=lead weight=semibold
          text "$149 a night · 4.3 stars" tone=muted
        card
          text "Camelback Suites" style=lead weight=semibold
          text "$229 a night · 4.8 stars" tone=muted

More layout

column row overlap grid card list list-item accordion divider spacer each timeline step scroll

All layout elements on one page →