Class: Primer::TabNavComponent

Inherits:
Component
  • Object
show all
Includes:
ViewComponent::SlotableV2
Defined in:
app/components/primer/tab_nav_component.rb

Overview

Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.

Defined Under Namespace

Classes: MultipleSelectedTabsError, NoSelectedTabsError, TabComponent

Constant Summary

Constants inherited from Component

Component::STATUSES

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

Methods inherited from Component

status

Methods included from ViewHelper

#primer

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(aria_label: nil, with_panel: false, **system_arguments) ⇒ TabNavComponent

Returns a new instance of TabNavComponent.

Examples:

Default

<%= render(Primer::TabNavComponent.new) do |c| %>
  <% c.tab(selected: true, title: "Tab 1", href: "#") %>
  <% c.tab(title: "Tab 2", href: "#") %>
  <% c.tab(title: "Tab 3", href: "#") %>
<% end %>

With panels

<%= render(Primer::TabNavComponent.new(with_panel: true)) do |c| %>
  <% c.tab(selected: true, title: "Tab 1") { "Panel 1" } %>
  <% c.tab(title: "Tab 2") { "Panel 1" } %>
  <% c.tab(title: "Tab 3") { "Panel 1" } %>
<% end %>

Parameters:

  • aria_label (String) (defaults to: nil) —

    Used to set the ‘aria-label` on the top level `<nav>` element.

  • with_panel (Boolean) (defaults to: false) —

    Whether the TabNav should navigate through pages or panels.

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



39
40
41
42
43
44
45
46
47
48
49
 
# File 'app/components/primer/tab_nav_component.rb', line 39

def initialize(aria_label: nil, with_panel: false, **system_arguments)
  @aria_label = aria_label
  @with_panel = with_panel
  @system_arguments = system_arguments
  @system_arguments[:tag] ||= :div

  @system_arguments[:classes] = class_names(
    "tabnav",
    system_arguments[:classes]
  )
end

Instance Method Details

#before_render ⇒ Object 



51
52
53
 
# File 'app/components/primer/tab_nav_component.rb', line 51

def before_render
  validate_single_selected_tab
end