lustre/ui/layout/stack

loose

pub fn loose() -> Attribute(a)

Loose spacing has a large gap between each child element.

of

</>

pub fn of(
  element: fn(List(Attribute(a)), List(Element(a))) -> Element(a),
  attributes: List(Attribute(a)),
  children: List(Element(a)),
) -> Element(a)

By default the stack element uses a <div /> as its container. You can use this function to use a different element such as a <nav /> or <ul />.

packed

</>

pub fn packed() -> Attribute(a)

Packed spacing has no gap between each child element.

relaxed

</>

pub fn relaxed() -> Attribute(a)

Relaxed spacing has a medium-sized gap between each child element. This is the default gap but is provided as an attribute in case you want to toggle between different spaces.

space

</>

pub fn space(gap: String) -> Attribute(a)

Use this function to set a custom gap between each child element. You’ll need to use this function if you want a larger gap than loose or a smaller one than tight.

You can pass any valid CSS length value to this function such as 1rem or 10px, or you can use CSS variables such as var(--space-xs) to use the space scale from the theme.

stack

</>

pub fn stack(
  attributes: List(Attribute(a)),
  children: List(Element(a)),
) -> Element(a)

A stack is a list of elements perpendicular to the current writing direction with a uniform gap between each child. For a horizontal writing mode such as English, the stack will be vertical.

By default a medium-sized gap is used, based on Lustre UI’s spacing scale. You can use the packged, tight, or loose attributes to change the gap.

tight

</>

pub fn tight() -> Attribute(a)

Tight spacing has a small gap between each child element.

lustre_ui - v0.6.0