Class: Primer::Navigation::TabComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/primer/navigation/tab_component.rb

Overview

This component is part of navigation components such as ‘Primer::TabNavComponent` and `Primer::UnderlineNavComponent` and should not be used by itself.

Constant Summary

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(selected: false, with_panel: false, icon_classes: "", **system_arguments) ⇒ TabComponent

Returns a new instance of TabComponent.

Examples:

Default

<%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
  <% c.text { "Selected" } %>
<% end %>
<%= render(Primer::Navigation::TabComponent.new) do |c| %>
  <% c.text { "Not selected" } %>
<% end %>

With icons and counters

<%= render(Primer::Navigation::TabComponent.new) do |c| %>
  <% c.icon(:star) %>
  <% c.text { "Tab" } %>
<% end %>
<%= render(Primer::Navigation::TabComponent.new) do |c| %>
  <% c.icon(:star) %>
  <% c.text { "Tab" } %>
  <% c.counter(count: 10) %>
<% end %>
<%= render(Primer::Navigation::TabComponent.new) do |c| %>
  <% c.text { "Tab" } %>
  <% c.counter(count: 10) %>
<% end %>

With custom HTML

<%= render(Primer::Navigation::TabComponent.new) do |c| %>
  <div>
    This is my <strong>custom HTML</strong>
  </div>
<% end %>

Parameters:

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

    Whether the Tab is selected or not.

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

    Whether the Tab has an associated panel.

  • icon_classes (Boolean) (defaults to: "") —

    Classes that must always be applied to icons.

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
# File 'app/components/primer/navigation/tab_component.rb', line 79

def initialize(selected: false, with_panel: false, icon_classes: "", **system_arguments)
  @selected = selected
  @icon_classes = icon_classes
  @system_arguments = system_arguments
  @system_arguments[:role] = :tab

  if with_panel
    @system_arguments[:tag] ||= :button
    @system_arguments[:type] = :button
  else
    @system_arguments[:tag] ||= :a
  end

  return unless @selected

  if @system_arguments[:tag] == :a
    @system_arguments[:"aria-current"] = :page
  else
    @system_arguments[:"aria-selected"] = true
  end
end

Instance Attribute Details

#selected ⇒ Object (readonly)

Returns the value of attribute selected.



43
44
45
 
# File 'app/components/primer/navigation/tab_component.rb', line 43

def selected
  @selected
end