lustre_ui - v0.6.0

lustre/ui/layout/box

Functions

box

</> 
pub fn box(
  attributes: List(Attribute(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.

loose

</> 
pub fn loose() -> Attribute(a)

Loose spacing has a large amount of padding between the box edges and its children.

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 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 />.

packed

</> 
pub fn packed() -> Attribute(a)

Packed spacing means there is no padding between the box edges and its children.

relaxed

</> 
pub fn relaxed() -> Attribute(a)

Relaxed spacing has a medium amount of padding between the box edges and its children. This is the default amount of spacing but is provided as an attribute in case you want to switch between different spacings dynamically.

space

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

Use this function to set a custom amount of padding between the box edges and its children. 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.

tight

</> 
pub fn tight() -> Attribute(a)

Tight spacing has a small amount of padding between the box edges and its children.

✨ Search Document