lustre/ui/layout/sequence

breakpoint

pub fn breakpoint(break: String) -> Attribute(a)

This attribute determines the minimum width of the container before the sequence breaks. The default value is 30rem and any CSS length value is valid.

loose

</>

pub fn loose() -> Attribute(a)

Loose spacing 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, a sequence uses a <div /> as the container element. If you want to use a different element, you can use this function

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.

sequence

</>

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

A sequence lays elements out along the inline axis (horizontally for left-to-right languages) unless the container is too narrow, in which case it lays them out along the block axis (vertically for left-to-right languages) instead.

Media queries are often used to change the direction of a sequence based on the width of the viewport, but the sequence element itself instead uses its own width to determine the direction. To configure when the break happens, you can use the breakpoint attribute: the default value is 30rem.

While the sequence will break if the container gets too narrow, it will allow its children to shrink to fit into the container. If you want to force the container to break after a certain number of children regardless of the container’s width, you can use the split attribute.

🚨 If the number of children to split on is greater than 10, you must add the following CSS to your own stylesheet for things to work properly, replacing X with the number of children to split on:

.lustre-ui-sequence[data-split-at="X"] > :nth-last-child(n + X),
.lustre-ui-sequence[data-split-at="X"] > :nth-last-child(n + X) ~ * {
   flex-basis: 100%;
}

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.

split

</>

pub fn split(n: Int) -> Attribute(a)

This attribute forces the sequence to break once a certain number of children are added.

🚨 If the number of children to split on is greater than 10, you must add the following CSS to your own stylesheet for things to work properly, replacing X with the number of children to split on:

.lustre-ui-sequence[data-split-at="X"] > :nth-last-child(n + X),
.lustre-ui-sequence[data-split-at="X"] > :nth-last-child(n + X) ~ * {
   flex-basis: 100%;
}

💡 A value less than 3 is ignored because it wouldn’t make much sense. The sequence would always break!

tight

</>

pub fn tight() -> Attribute(a)

Tight spacing has a small gap between each child element.

lustre_ui - v0.6.0

Functions