Class: BetterUi::Tabs::TabComponent

Inherits:
ApplicationComponent show all
Defined in:
app/components/better_ui/tabs/tab_component.rb

Overview

A single tab component rendered as a button (JS mode) or link (Turbo mode).

This component renders the clickable tab element with proper ARIA attributes and styling based on the parent container's configuration.

Examples:

Basic tab

<%= render BetterUi::Tabs::TabComponent.new(id: "profile", label: "Profile") %>

Tab with icon and badge

<%= render BetterUi::Tabs::TabComponent.new(id: "messages", label: "Messages") do |tab| %>
  <% tab.with_icon { icon_svg } %>
  <% tab.with_badge { "3" } %>
<% end %>

Constant Summary

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(id:, label:, href: nil, active: false, disabled: false, mode: :js, style: :underline, variant: :primary, size: :md, frame_id: nil, container_id: nil, **options) ⇒ TabComponent

Initializes a new tab component.

Parameters:

  • id (String) —

    unique identifier for this tab

  • label (String) —

    display text for the tab

  • href (String, nil) (defaults to: nil) —

    URL for Turbo mode navigation

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

    whether this tab is initially active

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

    whether this tab is disabled

  • mode (Symbol) (defaults to: :js) —

    operating mode passed from container (:js, :turbo)

  • style (Symbol) (defaults to: :underline) —

    visual style passed from container

  • variant (Symbol) (defaults to: :primary) —

    color variant passed from container

  • size (Symbol) (defaults to: :md) —

    size passed from container

  • frame_id (String, nil) (defaults to: nil) —

    Turbo Frame ID passed from container

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

    parent container ID for ARIA

  • options (Hash) —

    additional HTML attributes



43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
# File 'app/components/better_ui/tabs/tab_component.rb', line 43

def initialize(
  id:,
  label:,
  href: nil,
  active: false,
  disabled: false,
  mode: :js,
  style: :underline,
  variant: :primary,
  size: :md,
  frame_id: nil,
  container_id: nil,
  **options
)
  @id = id
  @label = label
  @href = href
  @active = active
  @disabled = disabled
  @mode = mode
  @style = style
  @variant = variant
  @size = size
  @frame_id = frame_id
  @container_id = container_id
  @options = options
end

Instance Attribute Details

#active ⇒ Boolean (readonly)

Returns whether this tab is active.

Returns:

  • (Boolean) —

    the active state



81
82
83
 
# File 'app/components/better_ui/tabs/tab_component.rb', line 81

def active
  @active
end

#disabled ⇒ Boolean (readonly)

Returns whether this tab is disabled.

Returns:

  • (Boolean) —

    the disabled state



85
86
87
 
# File 'app/components/better_ui/tabs/tab_component.rb', line 85

def disabled
  @disabled
end

#id ⇒ String (readonly)

Returns the tab ID.

Returns:

  • (String) —

    the id



73
74
75
 
# File 'app/components/better_ui/tabs/tab_component.rb', line 73

def id
  @id
end

#label ⇒ String (readonly)

Returns the tab label.

Returns:

  • (String) —

    the label



77
78
79
 
# File 'app/components/better_ui/tabs/tab_component.rb', line 77

def label
  @label
end

Instance Method Details

#panel_id ⇒ String

Returns the associated panel ID.

Returns:

  • (String) —

    the panel element ID



89
90
91
 
# File 'app/components/better_ui/tabs/tab_component.rb', line 89

def panel_id
  "#{@container_id}-panel-#{@id}"
end

#tab_element_id ⇒ String

Returns the tab element ID.

Returns:

  • (String) —

    the tab element ID



95
96
97
 
# File 'app/components/better_ui/tabs/tab_component.rb', line 95

def tab_element_id
  "#{@container_id}-tab-#{@id}"
end

#with_badge ⇒ Object

Slot for rendering a badge after the label

Yield Returns:

  • (String) —

    the HTML content for the badge



27
 
# File 'app/components/better_ui/tabs/tab_component.rb', line 27

renders_one :badge

#with_icon ⇒ Object

Slot for rendering an icon before the label

Yield Returns:

  • (String) —

    the HTML content for the icon



22
 
# File 'app/components/better_ui/tabs/tab_component.rb', line 22

renders_one :icon