Class: BetterUi::Tabs::PanelComponent

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

Overview

A tab panel component that contains the content for a single tab.

This component renders the panel content with proper ARIA attributes for accessibility. Used in JS mode where all panel content is present in the DOM.

Examples:

Basic panel

<%= render BetterUi::Tabs::PanelComponent.new(id: "profile") do %>
  <p>Profile content here</p>
<% end %>

Active panel

<%= render BetterUi::Tabs::PanelComponent.new(id: "profile", active: true) do %>
  <p>This panel is initially visible</p>
<% 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:, active: false, container_id: nil, **options) ⇒ PanelComponent

Initializes a new panel component.

Parameters:

  • id (String) —

    unique identifier matching the corresponding tab

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

    whether this panel is initially visible

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

    parent container ID for ARIA

  • options (Hash) —

    additional HTML attributes



27
28
29
30
31
32
33
34
35
36
37
 
# File 'app/components/better_ui/tabs/panel_component.rb', line 27

def initialize(
  id:,
  active: false,
  container_id: nil,
  **options
)
  @id = id
  @active = active
  @container_id = container_id
  @options = options
end

Instance Attribute Details

#active ⇒ Boolean (readonly)

Returns whether this panel is active (visible).

Returns:

  • (Boolean) —

    the active state



45
46
47
 
# File 'app/components/better_ui/tabs/panel_component.rb', line 45

def active
  @active
end

#id ⇒ String (readonly)

Returns the panel ID.

Returns:

  • (String) —

    the id



41
42
43
 
# File 'app/components/better_ui/tabs/panel_component.rb', line 41

def id
  @id
end

Instance Method Details

#panel_element_id ⇒ String

Returns the panel element ID.

Returns:

  • (String) —

    the panel element ID



49
50
51
 
# File 'app/components/better_ui/tabs/panel_component.rb', line 49

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

#tab_element_id ⇒ String

Returns the corresponding tab element ID.

Returns:

  • (String) —

    the tab element ID



55
56
57
 
# File 'app/components/better_ui/tabs/panel_component.rb', line 55

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