Hakumi :: Rails ViewComponents

Basic Structure

Classic page layout.

Content

Code

<%= render(Hakumi::Layout::Component.new) do %>
  <%= render(Hakumi::Layout::Header::Component.new(style: "background: #0092ff;")) do %>
    <div style="color: white; font-size: 18px; font-weight: bold;">Header</div>
  <% end %>
  <%= render(Hakumi::Layout::Content::Component.new) do %>
    <div style="background: #69c0ff; padding: 24px; min-height: 280px; color: white;">Content</div>
  <% end %>
  <%= render(Hakumi::Layout::Footer::Component.new(style: "background: #0092ff;")) do %>
    <div style="text-align: center; color: white;">Footer</div>
  <% end %>
<% end %>

Header-Content-Footer

The most basic "header-content-footer" layout.

Content

Code

<%= render(Hakumi::Layout::Component.new(style: "min-height: 100vh;")) do %>
  <%= render(Hakumi::Layout::Header::Component.new(style: "background: #0092ff;")) do %>
    <div style="color: white; font-size: 18px; font-weight: bold;">Header</div>
  <% end %>
  <%= render(Hakumi::Layout::Content::Component.new(style: "padding: 0 50px;")) do %>
    <div style="background: #69c0ff; padding: 24px; margin-top: 16px; min-height: 380px; color: white;">Content</div>
  <% end %>
  <%= render(Hakumi::Layout::Footer::Component.new(style: "text-align: center; background: #0092ff; color: white;")) do %>
    Application Footer &copy;<%= Time.current.year %>
  <% end %>
<% end %>

Layout with Sider

Two-columns layout. The sider menu can be collapsed.

Content

Code

<%= render(Hakumi::Layout::Component.new) do %>
  <%= render(Hakumi::Layout::Header::Component.new(style: "background: #0092ff;")) do %>
    <div style="color: white; font-size: 18px; font-weight: bold;">Header</div>
  <% end %>
  <%= render(Hakumi::Layout::Component.new(has_sider: true)) do %>
    <%= render(Hakumi::Layout::Sider::Component.new(width: 200, theme: :dark, style: "background: #0092ff;")) do %>
      <div style="height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.3); border-radius: 4px;"></div>
      <div style="padding: 16px; color: white;">
        <div style="margin-bottom: 12px;">Menu Item 1</div>
        <div style="margin-bottom: 12px;">Menu Item 2</div>
        <div style="margin-bottom: 12px;">Menu Item 3</div>
      </div>
    <% end %>
    <%= render(Hakumi::Layout::Component.new(style: "padding: 0 24px 24px;")) do %>
      <%= render(Hakumi::Layout::Content::Component.new(style: "background: #69c0ff; padding: 24px; margin: 0; min-height: 280px; color: white;")) do %>
        Content
      <% end %>
    <% end %>
  <% end %>
<% end %>

Sider with Light Theme

Sider supports light theme.

Content

Code

<%= render(Hakumi::Layout::Component.new(has_sider: true, style: "min-height: 100vh;")) do %>
  <%= render(Hakumi::Layout::Sider::Component.new(width: 200, theme: :light, style: "background: #69c0ff;")) do %>
    <div style="height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.5); border-radius: 4px;"></div>
    <div style="padding: 16px; color: white;">
      <div style="margin-bottom: 12px;">Menu Item 1</div>
      <div style="margin-bottom: 12px;">Menu Item 2</div>
      <div style="margin-bottom: 12px;">Menu Item 3</div>
    </div>
  <% end %>
  <%= render(Hakumi::Layout::Component.new) do %>
    <%= render(Hakumi::Layout::Header::Component.new(style: "background: #0092ff; padding: 0 24px;")) do %>
      <div style="font-size: 18px; font-weight: bold; color: white;">Header</div>
    <% end %>
    <%= render(Hakumi::Layout::Content::Component.new(style: "margin: 24px 16px;")) do %>
      <div style="background: #f5f5f5; padding: 24px; min-height: 360px;">Content</div>
    <% end %>
    <%= render(Hakumi::Layout::Footer::Component.new(style: "text-align: center; background: #0092ff; color: white;")) do %>
      Application Footer &copy;<%= Time.current.year %>
    <% end %>
  <% end %>
<% end %>

Responsive Sider

You can hide the sider with a different width.

This layout demonstrates responsive behavior.

The sider has a width of 250px and collapses to 80px at the 'lg' breakpoint (992px).

Code

<%= render(Hakumi::Layout::Component.new(has_sider: true)) do %>
  <%= render(Hakumi::Layout::Sider::Component.new(width: 250, collapsed_width: 80, breakpoint: :lg, theme: :dark, style: "background: #0092ff;")) do %>
    <div style="height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.3); border-radius: 4px;"></div>
    <div style="padding: 16px; color: white;">
      <div style="margin-bottom: 12px;">Navigation One</div>
      <div style="margin-bottom: 12px;">Navigation Two</div>
      <div style="margin-bottom: 12px;">Navigation Three</div>
    </div>
  <% end %>
  <%= render(Hakumi::Layout::Component.new) do %>
    <%= render(Hakumi::Layout::Header::Component.new(style: "background: #0092ff;")) do %>
      <div style="color: white; font-size: 18px; font-weight: bold;">Responsive Layout</div>
    <% end %>
    <%= render(Hakumi::Layout::Content::Component.new(style: "margin: 24px 16px;")) do %>
      <div style="background: #69c0ff; padding: 24px; min-height: 360px; color: white;">
        <p>This layout demonstrates responsive behavior.</p>
        <p>The sider has a width of 250px and collapses to 80px at the 'lg' breakpoint (992px).</p>
      </div>
    <% end %>
    <%= render(Hakumi::Layout::Footer::Component.new(style: "text-align: center; background: #0092ff; color: white;")) do %>
      Application Footer &copy;<%= Time.current.year %>
    <% end %>
  <% end %>
<% end %>

Layout API

Prop	Type	Default	Description
`has_sider`	`Boolean`	`false`	Adds `.hakumi-layout-has-sider` to adjust spacing when a sider is present.
`content slot`	`Slot`	`-`	Layout children (Header, Content, Footer, Sider, etc.).
`**html_options`	`Keyword args`	`-`	Wrapper attributes merged into `.hakumi-layout` (pass as kwargs such as `class:`, `style:`).

Layout::Header / Content / Footer API

Prop	Type	Default	Description
`content slot`	`Slot`	`-`	Region content.
`**html_options`	`Keyword args`	`-`	Attributes for the region element (pass as kwargs like `class:` / `data:`).

Layout::Sider API

Prop	Type	Default	Description
`width`	`Integer`	`200`	Expanded width in pixels.
`collapsed_width`	`Integer`	`80`	Width when collapsed.
`collapsible`	`Boolean`	`false`	Adds trigger affordance styling.
`collapsed`	`Boolean`	`false`	Render sider in collapsed state.
`theme`	`:dark or :light`	`:dark`	Applies Hakumi theme classes.
`breakpoint`	`Symbol`	`-`	Breakpoint name to integrate with responsive behavior (consumer handled).
`content slot`	`Slot`	`-`	Sider content/menu.
`**html_options`	`Keyword args`	`-`	Additional sider attributes passed as kwargs (e.g., `class:`, `style:`).