Tabs
A row of tabs: panels switched in the page with the ARIA tab pattern, or links to separate pages rendered on the server.
Panels in the page
Arrow keys, Home and End move between tabs. A disabled tab shows its reason, and with an id: the choice survives a reload.
Preview (HTML only)
{ "ok": true }
- Content-Type
- application/json
- Cache-Control
- no-store
Took 42ms.
<%= tabs id: "preview_tabs" do |tabs| %>
<% tabs.tab "Body" %>
<% tabs.tab "Headers" %>
<% tabs.tab "Preview", disabled: "HTML only" %>
<% tabs.tab "Timing" %>
<% tabs.panel do %>
<pre class="m-0">{ "ok": true }</pre>
<% end %>
<% tabs.panel do %>
<%= detail_list do |list| %>
<% list.item "Content-Type", "application/json" %>
<% list.item "Cache-Control", "no-store" %>
<% end %>
<% end %>
<% tabs.panel do %>
Took 42ms.
<% end %>
<% end %>Links to separate pages
Tabs with href: need no script; mark the current one active: true.
<%= tabs do |tabs| %>
<% tabs.tab "Tabs", href: component_path("tabs"), active: true %>
<% tabs.tab "Menu", href: component_path("menu") %>
<% tabs.tab "Archived", disabled: true %>
<% end %>The bar style, with icons
style: :bar is pill tabs with no track, for a bar across a card or a page. icon: leads each label. On a narrow screen the row scrolls sideways and the chosen tab is kept in view.
What the project is.
Every file it holds.
What passed and what didn't.
Where it's being talked about.
How it behaves.
<%= tabs id: "bar_tabs", style: :bar do |tabs| %>
<% tabs.tab "Overview", icon: :file %>
<% tabs.tab "Files", icon: :folder %>
<% tabs.tab "Checks", icon: :list_checks %>
<% tabs.tab "Discussion", icon: :messages_square %>
<% tabs.tab "Settings", icon: :wrench %>
<% tabs.panel { "What the project is." } %>
<% tabs.panel { "Every file it holds." } %>
<% tabs.panel { "What passed and what didn't." } %>
<% tabs.panel { "Where it's being talked about." } %>
<% tabs.panel { "How it behaves." } %>
<% end %>