lustre/ui/breadcrumbs
Functions
pub fn align_centre() -> 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 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 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 tight() -> Attribute(a)
A tight cluster has a small gap between each child element.