Class: UI::TabsComponent

Inherits:
ViewComponent::Base
  • Object
show all
Includes:
TabsBehavior
Defined in:
app/view_components/ui/tabs_component.rb

Overview

Tabs container component (ViewComponent) Root component for tabbed interface with keyboard navigation

Examples:

Basic usage

<%= render UI::TabsComponent.new(default_value: "account") do %>
  <%= render UI::TabsListComponent.new do %>
    <%= render UI::TabsTriggerComponent.new(value: "account") { "Account" } %>
    <%= render UI::TabsTriggerComponent.new(value: "password") { "Password" } %>
  <% end %>
  <%= render UI::TabsContentComponent.new(value: "account") { "Account content" } %>
  <%= render UI::TabsContentComponent.new(value: "password") { "Password content" } %>
<% end %>

Instance Method Summary collapse

Methods included from TabsBehavior

#merged_data_attributes, #tabs_data_attributes, #tabs_html_attributes

Constructor Details

#initialize(default_value: "", orientation: "horizontal", activation_mode: "automatic", classes: "", attributes: {}) ⇒ TabsComponent

Returns a new instance of TabsComponent.

Parameters:

  • default_value (String) (defaults to: "") —

    initial active tab value

  • orientation (String) (defaults to: "horizontal") —

    “horizontal” or “vertical”

  • activation_mode (String) (defaults to: "automatic") —

    “automatic” or “manual”

  • classes (String) (defaults to: "") —

    additional CSS classes

  • attributes (Hash) (defaults to: {}) —

    additional HTML attributes



23
24
25
26
27
28
29
 
# File 'app/view_components/ui/tabs_component.rb', line 23

def initialize(default_value: "", orientation: "horizontal", activation_mode: "automatic", classes: "", attributes: {})
  @default_value = default_value
  @orientation = orientation
  @activation_mode = activation_mode
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#call ⇒ Object 



31
32
33
34
35
36
37
38
 
# File 'app/view_components/ui/tabs_component.rb', line 31

def call
  attrs = tabs_html_attributes
  attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))

  content_tag :div, **attrs.merge(@attributes.except(:data)) do
    content
  end
end