Hakumi :: Rails ViewComponents

Basic

The simplest usage of Anchor. Click on the links to navigate between sections, or scroll to see the active link update.

Code

<%= render Hakumi::Grid::Row::Component.new(align: :top) do %>
  <%= render Hakumi::Grid::Col::Component.new(span: 16) do %>
    <div id="part-1" style="height: 100vh; background: rgba(255,0,0,0.02); padding: 16px;">
      <%= render Hakumi::Typography::Title::Component.new(level: 2) do %>Part 1<% end %>
      <%= render Hakumi::Typography::Paragraph::Component.new do %>
        This is the content of Part 1. Scroll down to see more sections.
      <% end %>
    </div>
    <div id="part-2" style="height: 100vh; background: rgba(0,255,0,0.02); padding: 16px;">
      <%= render Hakumi::Typography::Title::Component.new(level: 2) do %>Part 2<% end %>
      <%= render Hakumi::Typography::Paragraph::Component.new do %>
        This is the content of Part 2. The anchor navigation on the right tracks your scroll position.
      <% end %>
    </div>
    <div id="part-3" style="height: 100vh; background: rgba(0,0,255,0.02); padding: 16px;">
      <%= render Hakumi::Typography::Title::Component.new(level: 2) do %>Part 3<% end %>
      <%= render Hakumi::Typography::Paragraph::Component.new do %>
        This is the content of Part 3. Click on the anchor links to navigate.
      <% end %>
    </div>
  <% end %>
  <%= render Hakumi::Grid::Col::Component.new(span: 8) do %>
    <%= render Hakumi::Anchor::Component.new do |anchor| %>
      <% anchor.with_link(href: "#part-1", title: "Part 1") %>
      <% anchor.with_link(href: "#part-2", title: "Part 2") %>
      <% anchor.with_link(href: "#part-3", title: "Part 3") %>
    <% end %>
  <% end %>
<% end %>

Static Anchor

Do not change state when page is scrolling. Set affix: false to disable fixed positioning.

Code

<%= render Hakumi::Grid::Row::Component.new(align: :top) do %>
  <%= render Hakumi::Grid::Col::Component.new(span: 16) do %>
    <div id="static-part-1" style="height: 100vh; background: rgba(255,0,0,0.02); padding: 16px;">
      <%= render Hakumi::Typography::Title::Component.new(level: 2) do %>Part 1<% end %>
      <%= render Hakumi::Typography::Paragraph::Component.new do %>
        Static anchor does not change state when page is scrolling.
      <% end %>
    </div>
    <div id="static-part-2" style="height: 100vh; background: rgba(0,255,0,0.02); padding: 16px;">
      <%= render Hakumi::Typography::Title::Component.new(level: 2) do %>Part 2<% end %>
      <%= render Hakumi::Typography::Paragraph::Component.new do %>
        The anchor links still work for navigation but won't highlight based on scroll.
      <% end %>
    </div>
    <div id="static-part-3" style="height: 100vh; background: rgba(0,0,255,0.02); padding: 16px;">
      <%= render Hakumi::Typography::Title::Component.new(level: 2) do %>Part 3<% end %>
      <%= render Hakumi::Typography::Paragraph::Component.new do %>
        Use affix: false to disable fixed positioning.
      <% end %>
    </div>
  <% end %>
  <%= render Hakumi::Grid::Col::Component.new(span: 8) do %>
    <%= render Hakumi::Anchor::Component.new(affix: false) do |anchor| %>
      <% anchor.with_link(href: "#static-part-1", title: "Part 1") %>
      <% anchor.with_link(href: "#static-part-2", title: "Part 2") %>
      <% anchor.with_link(href: "#static-part-3", title: "Part 3") %>
    <% end %>
  <% end %>
<% end %>

Horizontal Anchor

Horizontal anchor navigation with direction: :horizontal. The active indicator slides below the links.

Code

<%= render Hakumi::Anchor::Component.new(direction: :horizontal) do |anchor| %>
  <% anchor.with_link(href: "#horizontal-part-1", title: "Part 1") %>
  <% anchor.with_link(href: "#horizontal-part-2", title: "Part 2") %>
  <% anchor.with_link(href: "#horizontal-part-3", title: "Part 3") %>
<% end %>
<div id="horizontal-part-1" style="height: 100vh; background: rgba(255,0,0,0.02); padding: 16px;">
  <%= render Hakumi::Typography::Title::Component.new(level: 2) do %>Part 1<% end %>
  <%= render Hakumi::Typography::Paragraph::Component.new do %>
    Horizontal anchor navigation displays links in a row.
  <% end %>
</div>
<div id="horizontal-part-2" style="height: 100vh; background: rgba(0,255,0,0.02); padding: 16px;">
  <%= render Hakumi::Typography::Title::Component.new(level: 2) do %>Part 2<% end %>
  <%= render Hakumi::Typography::Paragraph::Component.new do %>
    The active indicator slides horizontally below the links.
  <% end %>
</div>
<div id="horizontal-part-3" style="height: 100vh; background: rgba(0,0,255,0.02); padding: 16px;">
  <%= render Hakumi::Typography::Title::Component.new(level: 2) do %>Part 3<% end %>
  <%= render Hakumi::Typography::Paragraph::Component.new do %>
    Use direction: :horizontal for this layout.
  <% end %>
</div>

Anchor API

Prop	Type	Default	Description
`affix`	`Boolean`	`true`	Fixed mode of Anchor.
`bounds`	`Integer`	`5`	Bounding distance of anchor area (pixels).
`offset_top`	`Integer`	`0`	Pixels to offset from top when calculating position of scroll.
`target_offset`	`Integer`	`-`	Anchor scroll offset, default as offset_top.
`direction`	`:vertical or :horizontal`	`:vertical`	Set Anchor direction.
`replace`	`Boolean`	`false`	Replace items in browser history instead of pushing.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the root element.

Anchor Link API

Prop	Type	Default	Description
`href`	`String`	`-`	The target of hyperlink (required).
`title`	`String`	`-`	The content of hyperlink (required).
`target`	`String`	`-`	Specifies where to display the linked URL.
`links (slot)`	`Slot`	`-`	Nested child links for hierarchical navigation.