alder-ui demos

al-stack

Lays its children out in a column (the default) or a wrapping row, with a gap.

Column

One Two Three

Row

One Two Three

A form column: fields stretch, buttons and badges do not

    Optional

    Gaps: sm, md, lg, xl

    One Two Three One Two Three One Two Three One Two Three

    A page stack: hidden children add no gap

    The hidden input, the empty alert and the closed dialog take no space, so the gap between One and Two is one lg gap.

    One

      Closed

      Not open, so not drawn.

      Two