lustre/ui/layout/aside

align_centre

pub fn align_centre() -> Attribute(a)

When the main content is taller than the side content, the align_centre attribute tells the side content to align itself to the middle of the container.

align_end

</>

pub fn align_end() -> Attribute(a)

When the main content is taller than the side content, the align_end attribute tells the side content to align itself to the bottom of the container.

align_start

</>

pub fn align_start() -> Attribute(a)

When the main content is taller than the side content, the align_start attribute tells the side content to align itself to the top of the container.

aside

</>

pub fn aside(
  attributes: List(Attribute(a)),
  side: Element(a),
  main: Element(a),
) -> Element(a)

A two-column layout with a side column and a main column. When laid out side-by-side, the main column always occupies at least 60% of the width of the container by default. When the width of the side column makes this impossible, the layout switches to a stack with the side column displayed first.

It is possible to flip the layout so that the main column is displayed first by using the content_first attribute. You can switch back to the default behaviour with the content_last attribute.

content_first

</>

pub fn content_first() -> Attribute(a)

Visually places the main content first in the layout. Note that this doesn’t change the markup: the side content is always the first child of the aside container.

content_last

</>

pub fn content_last() -> Attribute(a)

Visually places the main content last in the layout. Note that this doesn’t change the markup: the side content is always the first child of the aside container.

loose

</>

pub fn loose() -> Attribute(a)

Loose spacing has a large gap between each child element.

min_width

</>

pub fn min_width(width: Int) -> Attribute(a)

This attribute specifies the minimum width of the main content before forcing the layout to stack. Values represent a percentage of the container width, and are clamped between 10% and 90%.

of

</>

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

The default aside element uses a <div /> as the underling container. You can use this function if you want to use a different container such as a <section /> or <article />.

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.

stretch

</>

pub fn stretch() -> Attribute(a)

The stretch attribute tells the side content to grow to match the height of the main content. This is useful if you have a side column with a background you want to fill or an image you want to stretch to the full height of the container.

tight

</>

pub fn tight() -> Attribute(a)

Tight spacing has a small gap between each child element.

lustre_ui - v0.6.0

Functions