Tabs

Tabs
Includes a Ruby component and corresponding Rails helper
Ruby
Includes a Stimulus controller
Stimulus

Example

Hi I'm a general, at ease soldier
<%= nk_tabs(default: :general) do |t| %>
  <%= t.tabs do %>
    <%= t.tab(:general) { "Profile" } %>
    <%= t.tab(:billing) { "Billing" } %>
    <%= t.tab(:contact) { "Contact" } %>
  <% end %>
  <%= t.panel(:general) do %>
    <div>Hi I'm a general, at ease soldier</div>
  <% end %>
  <%= t.panel(:billing) do %>
    <div>Find that one receipt that your accountant asks for</div>
  <% end %>
  <%= t.panel(:contact) do %>
    <div>How we can contact you when we screw up</div>
  <% end %>
<% end %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:add tabs

Usage

nk_tabs(default: nil, **attrs) { |tabs| ... }
PropertyDefaultDescription
defaultnil The initial tab to show.
**attrsHTML attributes for <div> element
tabs.tabs(**attrs) { |tabs| ... }
PropertyDefaultDescription
**attrsHTML attributes for <div> element
tabs.tab(key, text = nil, **attrs) { ... }
PropertyDefaultDescription
key Required Unique identifier
textnilPlain text content
**attrsHTML attributes for <button> element
tabs.panel(key, **attrs) { ... }
PropertyDefaultDescription
key Required Unique identifier
**attrsHTML attributes for <div> element