Hakumi :: Rails ViewComponents

Basic Flex

Basic horizontal flex layout.

Code

<%= render(Hakumi::Flex::Component.new(gap: :middle, align: :start, class: "demo-flex-container")) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary)) { "Primary" } %>
  <%= render(Hakumi::Button::Component.new) { "Default" } %>
  <%= render(Hakumi::Button::Component.new(type: :dashed)) { "Dashed" } %>
  <%= render(Hakumi::Button::Component.new(type: :text)) { "Text" } %>
<% end %>

Vertical Flex

Vertical flex layout.

Code

<%= render(Hakumi::Flex::Component.new(vertical: true, gap: :middle, class: "demo-flex-container")) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary)) { "Primary" } %>
  <%= render(Hakumi::Button::Component.new) { "Default" } %>
  <%= render(Hakumi::Button::Component.new(type: :dashed)) { "Dashed" } %>
<% end %>

Wrap

Flex wrap behavior.

Code

<%= render(Hakumi::Flex::Component.new(wrap: :wrap, gap: :small, class: "demo-flex-container", style: "width: 100%; border: 1px solid #d9d9d9; padding: 10px;")) do %>
  <% 10.times do |i| %>
    <%= render(Hakumi::Button::Component.new) { "Button #{i + 1}" } %>
  <% end %>
<% end %>

Gap

Different gap sizes.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle, class: "demo-flex-container")) do %>
  <%= render(Hakumi::Flex::Component.new(gap: :small)) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Small Gap" } %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Small Gap" } %>
  <% end %>

  <%= render(Hakumi::Flex::Component.new(gap: :middle)) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Middle Gap" } %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Middle Gap" } %>
  <% end %>

  <%= render(Hakumi::Flex::Component.new(gap: :large)) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Large Gap" } %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Large Gap" } %>
  <% end %>
<% end %>

Align & Justify

Alignment and justification options.

Code

<%= render(
  Hakumi::Flex::Component.new(
    vertical: true,
    gap: :middle,
    style: "width: 100%;"
  )
) do %>
  <%= render(
    Hakumi::Flex::Component.new(
      justify: :space_between,
      align: :center,
      style: "width: 100%; border: 1px solid #d9d9d9; padding: 10px;"
    )
  ) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Start" } %>
    <%= render(Hakumi::Button::Component.new) { "Center" } %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "End" } %>
  <% end %>

  <%= render(
    Hakumi::Flex::Component.new(
      justify: :center,
      align: :center,
      style: "width: 100%; border: 1px solid #d9d9d9; padding: 10px; height: 100px;"
    )
  ) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Centered" } %>
  <% end %>
<% end %>

Flex API

Prop	Type	Default	Description
`vertical`	`Boolean`	`false`	Switch layout to column direction.
`wrap`	`:wrap \| :nowrap or :wrap-reverse`	`:nowrap`	Flex-wrap behavior.
`justify`	`:start \| :end \| :center or :space-between \| :space-around \| :space-evenly`	`:start`	Horizontal distribution of items.
`align`	`:start \| :end \| :center \| :baseline or :stretch`	`:start`	Cross-axis alignment.
`gap`	`:small \| :middle \| :large \| Numeric or String`	`-`	Spacing between items (token or explicit css value).
`component`	`Symbol`	`:div`	HTML tag used for the wrapper.
`content slot`	`Slot`	`-`	Flex items to render.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the wrapper. Pass as kwargs (e.g., `class:`, `style:`, `data:`).