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

A responsive flex stack that switches from vertical (column) on mobile to horizontal (row) at a configurable breakpoint.

This encodes the extremely common mobile-column / desktop-row pattern as a single component with typed attributes, eliminating repetitive flex flex-col md:flex-row class strings.

Examples

<%!-- Default: column on mobile, row from md --%>
<.responsive_stack>
  <div>Left</div>
  <div>Right</div>
</.responsive_stack>

<%!-- Row from lg with larger gap --%>
<.responsive_stack breakpoint={:lg} gap={8}>
  <.card>A</.card>
  <.card>B</.card>
  <.card>C</.card>
</.responsive_stack>

<%!-- Reversed row on desktop, centered --%>
<.responsive_stack reverse align={:center}>
  <div>Media</div>
  <div>Content</div>
</.responsive_stack>

Summary

Functions

responsive_stack(assigns)

Renders a responsive flex stack (column on mobile, row at breakpoint).

Functions

responsive_stack(assigns)

Renders a responsive flex stack (column on mobile, row at breakpoint).

Attributes

breakpoint (:atom) - Breakpoint at which the stack switches from column to row. Defaults to :md. Must be one of :sm, :md, :lg, or :xl.
gap (:integer) - Gap between children (0-12) applied as gap-N. Defaults to 4.
reverse (:boolean) - When true, uses flex-row-reverse instead of flex-row at the breakpoint. Defaults to false.
align (:atom) - align-items value applied to the flex container. Defaults to nil. Must be one of nil, :start, :center, :end, :stretch, or :baseline.
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.