# frozen_string_literal: true module Primer # Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page. class TabNavComponent < Primer::Component include ViewComponent::SlotableV2 class MultipleSelectedTabsError < StandardError; end class NoSelectedTabsError < StandardError; end # Tabs to be rendered. # # @param title [String] Text to be rendered by the tab. # @param selected [Boolean] Whether the tab is selected. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_many :tabs, lambda { |**system_arguments| return TabComponent.new(**system_arguments) unless @with_panel TabComponent.new(tag: :button, type: :button, **system_arguments) } # @example 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 %> # # @example 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 %> # # @param aria_label [String] Used to set the `aria-label` on the top level `