Tabs

Tabs organize content into separate views where only one is visible at a time.

Underline Tabs (Default)

Classic underlined tab style.

This is the profile tab content. You can put any content here including forms, lists, or other components.

<%= render Rvk::TabsComponent.new(variant: :underline) do |tabs| %>
  <% tabs.with_tab(id: "profile", label: "Profile", active: true) do %>
    <p>Profile content here.</p>
  <% end %>
  <% tabs.with_tab(id: "settings", label: "Settings") do %>
    <p>Settings content here.</p>
  <% end %>
<% end %>

Pills Tabs

Rounded pill-style tabs.

Showing all items in the list.

<%= render Rvk::TabsComponent.new(variant: :pills) do |tabs| %>
  <% tabs.with_tab(id: "all", label: "All", active: true) do %>
    <p>Content here.</p>
  <% end %>
<% end %>

Boxed Tabs

Segmented control style tabs.

Daily calendar view.

<%= render Rvk::TabsComponent.new(variant: :boxed) do |tabs| %>
  <% tabs.with_tab(id: "day", label: "Day", active: true) do %>
    <p>Content here.</p>
  <% end %>
<% end %>

Sizes

Tabs come in 3 sizes.

Small

Medium (default)

Large

<%= render Rvk::TabsComponent.new(size: :sm) do |tabs| %>
  ...
<% end %>

<%= render Rvk::TabsComponent.new(size: :lg) do |tabs| %>
  ...
<% end %>

Props

Prop	Type	Default	Description
variant	Symbol	:underline	Tab style: :underline, :pills, :boxed
size	Symbol	:md	Tab size: :sm, :md, :lg

Tab Props

Prop	Type	Default	Description
id	String	required	Unique identifier for the tab
label	String	required	Tab button text
active	Boolean	false	Whether this tab is initially active