scroll

A region that shows its children up to a fixed height and scrolls the rest, for a long list inside a card: messages, activity, results. Everything inside is still read and copied.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

size

gap

pad

Props

"text"textWhat it holds, for screen readers, e.g. Recent activity. Not drawn.optional

sizesm · md · lgHow tall it gets before it scrolls: sm (about 6 rows of controls), md (about 9) or lg (about 12).md

gapnumberSpace between children in pixels (default 8).8

padnumberInner padding in pixels (default 0).0

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 scroll, generated from the same definition.

  scroll "<text>"  — A region that shows its children up to a fixed height and scrolls the rest, for a long list inside a card: messages, activity, results. Everything inside is still read and copied.
    "<text>"  What it holds, for screen readers, e.g. Recent activity. Not drawn.
    size=<sm|md|lg>  How tall it gets before it scrolls: sm (about 6 rows of controls), md (about 9) or lg (about 12).
    gap=<number>  Space between children in pixels (default 8).
    pad=<number>  Inner padding in pixels (default 0).
    children: any elements
    example:
      state events=[{title: "Order NW-2041 shipped", when: "09:12"}, {title: "Refund approved", when: "08:40"}, {title: "New review: 5 stars", when: "Yesterday"}, {title: "Stock low: Ridge 28 L", when: "Yesterday"}, {title: "Invoice sent", when: "Mon"}, {title: "Order NW-2038 delivered", when: "Mon"}, {title: "Price change: Summit pack", when: "Sun"}, {title: "New customer: Lumen Cinema", when: "Sat"}]
      scroll "Recent activity" size=sm
        list
          each items=events as=e
            list-item "{e.title}" detail="{e.when}"

More layout

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

All layout elements on one page →