Hakumi :: Rails ViewComponents

Horizontal

Divider is horizontal by default. You can add text within Divider.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle)) do %>
  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>

  <%= render(Hakumi::Divider::Component.new) %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>

  <%= render(Hakumi::Divider::Component.new) %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>
<% end %>

Divider with Title

Divider with inner title, set orientation of divider to left, right or center.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Left Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Right Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle)) do %>
  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>

  <%= render(Hakumi::Divider::Component.new) do %>
    Text
  <% end %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>

  <%= render(Hakumi::Divider::Component.new(orientation_margin: :left)) do %>
    Left Text
  <% end %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>

  <%= render(Hakumi::Divider::Component.new(orientation_margin: :right)) do %>
    Right Text
  <% end %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>
<% end %>

Vertical

Use type='vertical' for vertical separator.

Text Link Link

Code

<%= render(Hakumi::Typography::Paragraph::Component.new) do %>
  Text
  <%= render(Hakumi::Divider::Component.new(orientation: :vertical)) %>
  <%= render(Hakumi::Typography::Link::Component.new(href: "#")) do %>
    Link
  <% end %>
  <%= render(Hakumi::Divider::Component.new(orientation: :vertical)) %>
  <%= render(Hakumi::Typography::Link::Component.new(href: "#")) do %>
    Link
  <% end %>
<% end %>

Dashed

Added dashed prop to make divider dashed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

With Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle)) do %>
  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>

  <%= render(Hakumi::Divider::Component.new(dashed: true)) %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>

  <%= render(Hakumi::Divider::Component.new(dashed: true)) do %>
    <%= render(Hakumi::Typography::Text::Component.new) { "With Text" } %>
  <% end %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>
<% end %>

Plain Text Style

Use plain prop to make divider text plain style.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Heading Style (default)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Plain Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle)) do %>
  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>

  <%= render(Hakumi::Divider::Component.new) do %>
    Heading Style (default)
  <% end %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>

  <%= render(Hakumi::Divider::Component.new(plain: true)) do %>
    Plain Style
  <% end %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare,
    quae sunt a te dicta? Refert tamen, quo modo.
  <% end %>
<% end %>

Divider API

Prop	Type	Default	Description
`orientation`	`:horizontal or :vertical`	`:horizontal`	Divider direction.
`dashed`	`Boolean`	`false`	Show dashed style.
`plain`	`Boolean`	`false`	Render inner text in plain style.
`orientation_margin`	`:left \| :center or :right`	`-`	Align inner text when present.
`content slot`	`Slot`	`-`	Optional text placed inside the divider.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the divider element. Pass as kwargs (e.g., `class:`, `style:`, `data:`).