Hakumi :: Rails ViewComponents

Basic Horizontal

Basic horizontal splitter with two panels.

Left Panel

Drag the divider to resize

Right Panel

Code

<%= render(Hakumi::Splitter::Component.new(style: "height: 300px; border: 1px solid #f0f0f0;")) do %>
  <%= render(Hakumi::Splitter::Panel::Component.new(size: "50%")) do %>
    <div style="padding: 16px;">
      <p>Left Panel</p>
      <p>Drag the divider to resize</p>
    </div>
  <% end %>
  <%= render(Hakumi::Splitter::Panel::Component.new) do %>
    <div style="padding: 16px;">
      <p>Right Panel</p>
    </div>
  <% end %>
<% end %>

Vertical Splitter

Vertical layout with resizable panels.

Top Panel

Bottom Panel

Code

<%= render(Hakumi::Splitter::Component.new(layout: :vertical, style: "height: 400px; border: 1px solid #f0f0f0;")) do %>
  <%= render(Hakumi::Splitter::Panel::Component.new(size: "50%")) do %>
    <div style="padding: 16px;">
      <p>Top Panel</p>
    </div>
  <% end %>
  <%= render(Hakumi::Splitter::Panel::Component.new) do %>
    <div style="padding: 16px;">
      <p>Bottom Panel</p>
    </div>
  <% end %>
<% end %>

Multiple Panels

Splitter with three panels.

Left Panel

Min: 100px, Max: 300px

Middle Panel (flexible)

Right Panel (200px)

Code

<%= render(Hakumi::Splitter::Component.new(style: "height: 300px; border: 1px solid #f0f0f0;")) do %>
  <%= render(Hakumi::Splitter::Panel::Component.new(size: 200, min: 100, max: 300)) do %>
    <div style="padding: 16px;">
      <p>Left Panel</p>
      <p>Min: 100px, Max: 300px</p>
    </div>
  <% end %>

  <%= render(Hakumi::Splitter::Panel::Component.new) do %>
    <div style="padding: 16px;">
      <p>Middle Panel (flexible)</p>
    </div>
  <% end %>

  <%= render(Hakumi::Splitter::Panel::Component.new(size: 200)) do %>
    <div style="padding: 16px;">
      <p>Right Panel (200px)</p>
    </div>
  <% end %>
<% end %>

Complex Layout

Nested splitters for complex layouts.

Sidebar

Navigation panel

Main Content

Editor area

Console

Output panel

Code

<%= render(Hakumi::Splitter::Component.new(style: "height: 500px; border: 1px solid #f0f0f0;")) do %>
  <%= render(Hakumi::Splitter::Panel::Component.new(size: "30%")) do %>
    <div style="padding: 16px; height: 100%;">
      <h4 style="margin-top: 0;">Sidebar</h4>
      <p>Navigation panel</p>
    </div>
  <% end %>

  <%= render(Hakumi::Splitter::Panel::Component.new) do %>
    <%= render(Hakumi::Splitter::Component.new(layout: :vertical, style: "height: 100%;")) do %>
      <%= render(Hakumi::Splitter::Panel::Component.new(size: "60%")) do %>
        <div style="padding: 16px;">
          <h4 style="margin-top: 0;">Main Content</h4>
          <p>Editor area</p>
        </div>
      <% end %>

      <%= render(Hakumi::Splitter::Panel::Component.new) do %>
        <div style="padding: 16px;">
          <h4 style="margin-top: 0;">Console</h4>
          <p>Output panel</p>
        </div>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Splitter API

Prop	Type	Default	Description
`layout`	`:horizontal or :vertical`	`:horizontal`	Direction of panels.
`resizable`	`Boolean`	`true`	Allow panel resizing.
`content slot`	`Slot`	`-`	Splitter panels (use Splitter::Panel).
`**html_options`	`Keyword args`	`-`	Attributes merged into `.hakumi-splitter`. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

Splitter::Panel API

Prop	Type	Default	Description
`size`	`Integer or String`	`-`	Fixed size (px or css value).
`min`	`Integer or String`	`-`	Minimum size constraint.
`max`	`Integer or String`	`-`	Maximum size constraint.
`resizable`	`Boolean`	`true`	Allow resizing for this panel.
`collapsible`	`Boolean or Hash`	`false`	Allow collapsing; hash to configure directions.
`content slot`	`Slot`	`-`	Panel content.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into `.hakumi-splitter-panel`. Pass as kwargs (e.g., `class:`, `style:`, `data:`).