lustre/ui/breadcrumbs

Functions

pub fn active() -> Attribute(a)
pub fn align_centre() -> Attribute(a)
pub fn align_end() -> Attribute(a)
pub fn align_start() -> Attribute(a)
pub fn breadcrumbs(
  attributes: List(Attribute(a)),
  separator: Element(a),
  children: List(Element(a)),
) -> Element(a)

A box is a generic container element with some padding applied to all sides. Many of the other layouting elements use margin to space themselves from other elements, but a box uses padding to space its children from itself.

pub fn error() -> Attribute(a)
pub fn greyscale() -> Attribute(a)
pub fn info() -> Attribute(a)
pub fn loose() -> Attribute(a)

A loose cluster has a large gap between each child element.

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

By default, the box element uses a <div /> as the underlying container. You can use this function to create a box using a different element such as a <section /> or a <p />.

pub fn primary() -> Attribute(a)
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.

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.

pub fn success() -> Attribute(a)
pub fn tight() -> Attribute(a)

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

pub fn warning() -> Attribute(a)
Search Document