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

Copy Markdown View Source

Two-column layout: a fixed-width pane alongside flexible main content.

Simpler than page_layout — no header/footer slots, just a pane and main content area. Ideal for list-detail, settings panels, and inspector UIs.

When collapsible is enabled (default), the pane is hidden below the md breakpoint and the layout stacks vertically on small screens.

Examples

<%!-- List-detail pattern --%>
<.split_layout>
  <:pane>
    <ul>
      <%= for item <- @items do %>
        <li phx-click="select" phx-value-id={item.id}>{item.name}</li>
      <% end %>
    </ul>
  </:pane>
  <div class="p-6">
    <%= if @selected do %>
      <h1>{@selected.name}</h1>
    <% end %>
  </div>
</.split_layout>

<%!-- Right pane inspector --%>
<.split_layout pane_position={:end} pane_width={:md}>
  <:pane><aside class="p-4">Properties</aside></:pane>
  <div class="p-6">Canvas area</div>
</.split_layout>

<%!-- Non-collapsible: pane always visible --%>
<.split_layout collapsible={false}>
  <:pane><nav>Always visible nav</nav></:pane>
  <div>Content</div>
</.split_layout>

Summary

Functions

split_layout(assigns)

Renders a two-column split layout.

Functions

split_layout(assigns)

Renders a two-column split layout.

Attributes

  • pane_position (:atom) - Pane position: :start (left) or :end (right). Defaults to :start. Must be one of :start, or :end.
  • pane_width (:atom) - Fixed width of the pane. Defaults to :sm. Must be one of :xs, :sm, :md, or :lg.
  • collapsible (:boolean) - When true, hides the pane below the md breakpoint and stacks vertically. Defaults to true.
  • class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

  • pane (required) - Fixed-width secondary panel.
  • inner_block (required) - Flexible main content area.