Hakumi :: Rails ViewComponents

Basic

By default, multiple panels can be expanded. First panel open by default in this demo.

Panel 1

Content of Panel 1

Panel 2

Content of Panel 2

Panel 3

Content of Panel 3

Code

<%= render Hakumi::Collapse::Component.new(default_active_keys: ["1"]) do |c| %>
  <% c.with_panel(key: "1", header: "Panel 1") do %>
    Content of Panel 1
  <% end %>
  <% c.with_panel(key: "2", header: "Panel 2") do %>
    Content of Panel 2
  <% end %>
  <% c.with_panel(key: "3", header: "Panel 3") do %>
    Content of Panel 3
  <% end %>
<% end %>

Size

Three sizes: default, small, large.

Small Panel

Small content

Default Panel

Default content

Large Panel

Large content

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, block: true) do |s| %>
  <% s.with_item do %>
    <%= render Hakumi::Collapse::Component.new(size: :small) do |c| %>
      <% c.with_panel(key: "1", header: "Small Panel") { "Small content" } %>
    <% end %>
  <% end %>
  <% s.with_item do %>
    <%= render Hakumi::Collapse::Component.new do |c| %>
      <% c.with_panel(key: "1", header: "Default Panel") { "Default content" } %>
    <% end %>
  <% end %>
  <% s.with_item do %>
    <%= render Hakumi::Collapse::Component.new(size: :large) do |c| %>
      <% c.with_panel(key: "1", header: "Large Panel") { "Large content" } %>
    <% end %>
  <% end %>
<% end %>

Accordion

In accordion mode, only one panel can be expanded at a time.

Panel 1

Content 1

Panel 2

Content 2

Panel 3

Content 3

Code

<%= render Hakumi::Collapse::Component.new(accordion: true) do |c| %>
  <% c.with_panel(key: "1", header: "Panel 1") { "Content 1" } %>
  <% c.with_panel(key: "2", header: "Panel 2") { "Content 2" } %>
  <% c.with_panel(key: "3", header: "Panel 3") { "Content 3" } %>
<% end %>

Nested

Collapse panels can be nested.

Parent Panel

Child Panel 1

Child content 1

Child Panel 2

Child content 2

Sibling Panel

Sibling content

Code

<%= render Hakumi::Collapse::Component.new do |c| %>
  <% c.with_panel(key: "1", header: "Parent Panel") do %>
    <%= render Hakumi::Collapse::Component.new(borderless: true) do |cc| %>
      <% cc.with_panel(key: "1-1", header: "Child Panel 1") { "Child content 1" } %>
      <% cc.with_panel(key: "1-2", header: "Child Panel 2") { "Child content 2" } %>
    <% end %>
  <% end %>
  <% c.with_panel(key: "2", header: "Sibling Panel") { "Sibling content" } %>
<% end %>

Borderless

A borderless style of Collapse.

Borderless Panel 1

Content 1

Borderless Panel 2

Content 2

Code

<%= render Hakumi::Collapse::Component.new(bordered: false) do |c| %>
  <% c.with_panel(key: "1", header: "Borderless Panel 1") { "Content 1" } %>
  <% c.with_panel(key: "2", header: "Borderless Panel 2") { "Content 2" } %>
<% end %>

Custom Panel

Customize header/extra and styles per panel.

Custom Header 1

Extra

Customized panel content with background and border.

With Icon

Content with custom extra icon.

Code

<%= render Hakumi::Collapse::Component.new do |c| %>
  <% c.with_panel(key: "1", header: tag.span("Custom Header 1", style: "color:#1677ff"), extra: tag.span("Extra", style: "font-size:12px;color:#8c8c8c")) do %>
    <div style="background:#fafafa;padding:8px;border-radius:8px;border:1px dashed #d9d9d9">
      Customized panel content with background and border.
    </div>
  <% end %>
  <% c.with_panel(key: "2", header: "With Icon", extra: render(Hakumi::Icon::Component.new(name: :setting))) do %>
    Content with custom extra icon.
  <% end %>
<% end %>

No Arrow

Hide the arrow icon with show_arrow: false.

No Arrow Panel

Content

Code

<%= render Hakumi::Collapse::Component.new do |c| %>
  <% c.with_panel(key: "1", header: "No Arrow Panel", show_arrow: false) { "Content" } %>
<% end %>

Extra

Render extra node in the top-right corner of each panel.

Panel with Extra

Edit

Content with an action on the right.

Code

<%= render Hakumi::Collapse::Component.new do |c| %>
  <% c.with_panel(key: "1", header: "Panel with Extra", extra: link_to("Edit", "#")) do %>
    Content with an action on the right.
  <% end %>
<% end %>

Ghost

Transparent background style.

Ghost Panel 1

Content 1

Ghost Panel 2

Content 2

Code

<%= render Hakumi::Collapse::Component.new(ghost: true) do |c| %>
  <% c.with_panel(key: "1", header: "Ghost Panel 1") { "Content 1" } %>
  <% c.with_panel(key: "2", header: "Ghost Panel 2") { "Content 2" } %>
<% end %>

Collapsible

Specify the trigger area with collapsible option.

Header clickable (default)

Content

Icon only clickable

Content

Disabled

Cannot toggle

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, style: "width: 100%") do |s| %>
  <% s.with_item do %>
    <%= render Hakumi::Collapse::Component.new(collapsible: :header) do |c| %>
      <% c.with_panel(key: "1", header: "Header clickable (default)") { "Content" } %>
    <% end %>
  <% end %>

  <% s.with_item do %>
    <%= render Hakumi::Collapse::Component.new(collapsible: :icon) do |c| %>
      <% c.with_panel(key: "2", header: "Icon only clickable") { "Content" } %>
    <% end %>
  <% end %>

  <% s.with_item do %>
    <%= render Hakumi::Collapse::Component.new do |c| %>
      <% c.with_panel(key: "3", header: "Disabled", collapsible: :disabled) { "Cannot toggle" } %>
    <% end %>
  <% end %>
<% end %>

Collapse API

Prop	Type	Default	Description
`size`	`Symbol`	`:default`	Size of collapse. Options: :default, :small, :large.
`accordion`	`Boolean`	`false`	Accordion mode: only one panel open at a time.
`bordered`	`Boolean`	`true`	Show outer border.
`ghost`	`Boolean`	`false`	Transparent background.
`collapsible`	`Symbol`	`nil`	Trigger area. Options: :header, :icon, :disabled. Panel-level collapsible overrides global.
`active_keys`	`Array[String]`	`nil`	Controlled active keys.
`default_active_keys`	`Array[String]`	`nil`	Initial active keys (uncontrolled).

Collapse.Panel API

Prop	Type	Default	Description
`key`	`String`	`-`	Unique key for panel (required).
`header`	`String/Component`	`nil`	Header content.
`extra`	`String/Component`	`nil`	Extra area on the right of header.
`disabled`	`Boolean`	`false`	Disable panel.
`show_arrow`	`Boolean`	`true`	Show expand/collapse arrow.
`collapsible`	`Symbol`	`nil`	Per-panel trigger area override.
`force_render`	`Boolean`	`false`	Render panel content even when collapsed. Useful for SEO or when content must be in DOM.

JavaScript API (element.hakumiCollapse)

Prop	Type	Default	Description
`getActiveKeys()`	`Function`	`-`	Return array of active panel keys.
`setActiveKeys(keys)`	`Function`	`-`	Set active keys (replaces all).
`open(key)`	`Function`	`-`	Open a panel.
`close(key)`	`Function`	`-`	Close a panel.
`toggle(key)`	`Function`	`-`	Toggle a panel.
`isAccordion()`	`Function`	`-`	Whether in accordion mode.
`isOpen(key)`	`Function`	`-`	Returns true if the panel key is active (or any panel is open if key omitted).
`getState()`	`Function`	`-`	Returns { activeKeys, accordion }.

Events

Prop	Type	Default	Description
`hakumi--collapse:before_change`	`CustomEvent`	`-`	Before active keys change. Detail: { currentActiveKeys, nextActiveKeys, toggledKey }.
`hakumi--collapse:after_change`	`CustomEvent`	`-`	After active keys change. Detail: { activeKeys, previousActiveKeys, toggledKey }.