Space - Hakumi Components

Basic Usage

Crowded components horizontal spacing.

Code

<%= render(HakumiComponents::Space::Component.new) do %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Primary" } %>
  <%= render(HakumiComponents::Button::Component.new) { "Default" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :dashed)) { "Dashed" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :link)) { "Link" } %>
<% end %>

Vertical Space

Crowded components vertical spacing.

Code

<%= render(HakumiComponents::Space::Component.new(direction: :vertical)) do %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Primary" } %>
  <%= render(HakumiComponents::Button::Component.new) { "Default" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :dashed)) { "Dashed" } %>
<% end %>

Space Size

Large, default, small, and custom numeric gaps.

Code

<%= render(HakumiComponents::Space::Component.new(direction: :vertical)) do %>
  <%= render(HakumiComponents::Space::Component.new(size: :large)) do %>
    <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Large" } %>
    <%= render(HakumiComponents::Button::Component.new) { "Large" } %>
    <%= render(HakumiComponents::Button::Component.new(type: :dashed)) { "Large" } %>
  <% end %>

  <%= render(HakumiComponents::Space::Component.new(size: :default)) do %>
    <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Middle" } %>
    <%= render(HakumiComponents::Button::Component.new) { "Middle" } %>
    <%= render(HakumiComponents::Button::Component.new(type: :dashed)) { "Middle" } %>
  <% end %>

  <%= render(HakumiComponents::Space::Component.new(size: :small)) do %>
    <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Small" } %>
    <%= render(HakumiComponents::Button::Component.new) { "Small" } %>
    <%= render(HakumiComponents::Button::Component.new(type: :dashed)) { "Small" } %>
  <% end %>

  <%= render(HakumiComponents::Space::Component.new(size: 32)) do %>
    <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Custom" } %>
    <%= render(HakumiComponents::Button::Component.new) { "Custom" } %>
    <%= render(HakumiComponents::Button::Component.new(type: :dashed)) { "Custom" } %>
  <% end %>
<% end %>

Align

Align configuration.

Center Block

Start Block

End Block

Baseline Block

Code

<div class="space-align-container">
  <div class="space-align-block">
    <%= render(HakumiComponents::Space::Component.new(align: :center)) do %>
      <span>Center</span>
      <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Primary" } %>
      <span class="mock-block">Block</span>
    <% end %>
  </div>
  <div class="space-align-block">
    <%= render(HakumiComponents::Space::Component.new(align: :start)) do %>
      <span>Start</span>
      <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Primary" } %>
      <span class="mock-block">Block</span>
    <% end %>
  </div>
  <div class="space-align-block">
    <%= render(HakumiComponents::Space::Component.new(align: :end)) do %>
      <span>End</span>
      <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Primary" } %>
      <span class="mock-block">Block</span>
    <% end %>
  </div>
  <div class="space-align-block">
    <%= render(HakumiComponents::Space::Component.new(align: :baseline)) do %>
      <span>Baseline</span>
      <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Primary" } %>
      <span class="mock-block">Block</span>
    <% end %>
  </div>
</div>

<style>
  .space-align-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }
  .space-align-block {
    flex: none;
    margin: 8px 4px;
    padding: 4px;
    border: 1px solid #40a9ff;
  }
  .mock-block {
    display: inline-block;
    padding: 16px 8px;
    background: rgba(150, 150, 150, 0.2);
  }
</style>

Wrap

Auto wrap line.

Code

<%= render(HakumiComponents::Space::Component.new(size: :default, wrap: true)) do %>
  <% 20.times do |i| %>
    <%= render(HakumiComponents::Button::Component.new) { "Button #{i}" } %>
  <% end %>
<% end %>

Block

Set block to make Space fill the available width.

Code

<%= render HakumiComponents::Space::Component.new(block: true, size: :default) do %>
  <%= render HakumiComponents::Button::Component.new(type: :primary) { "Primary" } %>
  <%= render(HakumiComponents::Button::Component.new) { "Secondary" } %>
<% end %>

Compact Mode

Compact adjacent controls horizontally or vertically.

Code

<%= render(HakumiComponents::Space::Component.new(direction: :vertical)) do %>
  <%= render(HakumiComponents::Space::Compact::Component.new(block: true)) do %>
    <%= render(HakumiComponents::Button::Component.new) { "Button 1" } %>
    <%= render(HakumiComponents::Button::Component.new) { "Button 2" } %>
    <%= render(HakumiComponents::Button::Component.new) { "Button 3" } %>
    <%= render(HakumiComponents::Button::Component.new) { "Button 4" } %>
  <% end %>

  <%= render(HakumiComponents::Space::Compact::Component.new(block: true)) do %>
    <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Button 1" } %>
    <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Button 2" } %>
    <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Button 3" } %>
    <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Button 4" } %>
  <% end %>

  <%= render(HakumiComponents::Space::Compact::Component.new(direction: :vertical)) do %>
    <%= render(HakumiComponents::Button::Component.new) { "Top" } %>
    <%= render(HakumiComponents::Button::Component.new) { "Middle" } %>
    <%= render(HakumiComponents::Button::Component.new) { "Bottom" } %>
  <% end %>
<% end %>

Split

Set split to add separator between items. Requires using with_item slots.

Link 1

Link 2

Link 3

Code

<%= render HakumiComponents::Space::Component.new(split: "|") do |space| %>
  <% space.with_item do %>
    <%= render(HakumiComponents::Typography::Text::Component.new) { "Link 1" } %>
  <% end %>
  <% space.with_item do %>
    <%= render(HakumiComponents::Typography::Text::Component.new) { "Link 2" } %>
  <% end %>
  <% space.with_item do %>
    <%= render(HakumiComponents::Typography::Text::Component.new) { "Link 3" } %>
  <% end %>
<% end %>

Space API

Prop	Type	Default	Description
`direction`	`:horizontal \| :vertical`	`:horizontal`	Layout orientation.
`size`	`:small \| :default \| :large \| Integer`	`:small`	Gap between items.
`align`	`:start \| :center \| :end \| :baseline`	`-`	Cross-axis alignment.
`wrap`	`Boolean`	`false`	Allow items to wrap.
`block`	`Boolean`	`false`	Display as block element.
`split`	`Renderable`	`-`	Separator between items. Only rendered when using with_item slots.
`**html_options`	`Keyword args`	`-`	Attributes merged into `.hakumi-space`. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

Space::Compact API

Prop	Type	Default	Description
`direction`	`:horizontal \| :vertical`	`:horizontal`	Stack direction.
`block`	`Boolean`	`false`	Full-width layout.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into `.hakumi-space-compact`. Pass as kwargs (e.g., `class:`, `style:`, `data:`).