SlopUI.Components.Layout (SlopUI v0.1.0)

Copy Markdown View Source

Layout primitives: composition, not utilities. A stack spaces children vertically, a cluster groups them horizontally with wrapping, a grid auto-fits columns.

Summary

Functions

Horizontal cluster that wraps.

Centered, max-width container.

Auto-fitting grid. min is the minimum column width.

Vertical stack.

Functions

cluster(assigns)

Horizontal cluster that wraps.

Attributes

  • gap (:string) - Defaults to "md". Must be one of "none", "xs", "sm", "md", "lg", or "xl".
  • align (:string) - Defaults to nil.Must be one of nil, "start", "center", "end", or "baseline".
  • justify (:string) - Defaults to nil.Must be one of nil, "start", "center", "end", or "between".
  • nowrap (:boolean) - Defaults to false.
  • tag (:string) - Defaults to "div".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

container(assigns)

Centered, max-width container.

Attributes

  • max (:string) - max inline size, e.g. "60rem". Defaults to nil.
  • tag (:string) - Defaults to "div".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

grid(assigns)

Auto-fitting grid. min is the minimum column width.

Attributes

  • gap (:string) - Defaults to "md". Must be one of "none", "xs", "sm", "md", "lg", or "xl".
  • min (:string) - Defaults to "16rem".
  • tag (:string) - Defaults to "div".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

stack(assigns)

Vertical stack.

Attributes

  • gap (:string) - Defaults to "md". Must be one of "none", "xs", "sm", "md", "lg", or "xl".
  • align (:string) - Defaults to nil.Must be one of nil, "start", "center", or "end".
  • tag (:string) - Defaults to "div".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)