lustre/ui/layout/cluster

align_centre

pub fn align_centre() -> Attribute(a)

align_end

</>

pub fn align_end() -> Attribute(a)

align_start

</>

pub fn align_start() -> Attribute(a)

cluster

</>

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

A cluster is a group of non-uniformly sized elements arranged along the inline axis. Where a cluster’s children are too wide or too many, the elements overflow in the same way that text typically does.

Clusters are useful for grouping things like tags or controls.

from_end

</>

pub fn from_end() -> Attribute(a)

from_start

</>

pub fn from_start() -> Attribute(a)

loose

</>

pub fn loose() -> Attribute(a)

A loose cluster 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 cluster uses a <div /> as the underlying container. You can use this function to use a different element, like a <ul /> instead.

packed

</>

pub fn packed() -> Attribute(a)

A packed cluster has no gap between each child element.

relaxed

</>

pub fn relaxed() -> Attribute(a)

A relaxed cluster has a medium-sized gap between each child element. This is the default gap but is provided as an attribute because nested clusters will inherit the gap from their parent cluster unless explicitly told otherwise.

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.

stretch

</>

pub fn stretch() -> Attribute(a)

tight

</>

pub fn tight() -> Attribute(a)

A tight cluster has a small gap between each child element.

lustre_ui - v0.6.0

Functions