PhiaUi.Components.Layout.Stack (phia_ui v0.1.17)

Vertical or horizontal flex stack with consistent gap.

stack is the workhorse layout component for most page regions. Use :vertical (default) for stacked sections and :horizontal for inline groups of elements.

All layout attributes accept either a plain value (backward compatible) or a responsive map like %{base: :vertical, md: :horizontal} for per-breakpoint control.

Examples

<%!-- Vertical stack (VStack equivalent) --%>
<.stack gap={4}>
  <.card>First</.card>
  <.card>Second</.card>
  <.card>Third</.card>
</.stack>

<%!-- Horizontal stack (HStack equivalent) --%>
<.stack direction={:horizontal} gap={2} align={:center}>
  <.icon name="hero-bell" />
  <span>Notifications</span>
  <.badge>3</.badge>
</.stack>

<%!-- Responsive: stack vertically on mobile, horizontal from md --%>
<.stack direction={%{base: :vertical, md: :horizontal}} gap={%{base: 2, md: 4}}>
  <.card>A</.card>
  <.card>B</.card>
</.stack>

<%!-- Centered vertical stack --%>
<.stack gap={6} align={:center} class="py-12">
  <h1>Title</h1>
  <p>Subtitle</p>
  <.button>Get started</.button>
</.stack>

Summary

Functions

stack(assigns)

Renders a flex stack container.

Functions

stack(assigns)

Renders a flex stack container.

Attributes

direction (:any) - Stack direction. Accepts atom or responsive map, e.g. %{base: :vertical, md: :horizontal}. Defaults to :vertical.
gap (:any) - Gap between children (0–12) → gap-N. Accepts integer or responsive map. Defaults to 4.
align (:any) - align-items value. Accepts atom or responsive map. Defaults to nil.
justify (:any) - justify-content value. Accepts atom or responsive map. Defaults to nil.
wrap (:boolean) - Allow children to wrap onto multiple lines. Defaults to false.
class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

inner_block (required) - Stack children.