Class: UI::Tabs

Inherits:
Phlex::HTML
  • Object
show all
Includes:
TabsBehavior
Defined in:
app/components/ui/tabs.rb

Overview

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

Examples:

Basic usage

render UI::Tabs.new(default_value: "account") do
  render UI::List.new do
    render UI::Trigger.new(value: "account") { "Account" }
    render UI::Trigger.new(value: "password") { "Password" }
  end
  render UI::Content.new(value: "account") { "Account content" }
  render UI::Content.new(value: "password") { "Password content" }
end

Vertical orientation

render UI::Tabs.new(default_value: "tab1", orientation: "vertical") do
  # Tabs will be vertically oriented
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: {}) ⇒ Tabs

Returns a new instance of Tabs.

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



28
29
30
31
32
33
34
35
 
# File 'app/components/ui/tabs.rb', line 28

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
  super()
end

Instance Method Details

#view_template(&block) ⇒ Object 



37
38
39
 
# File 'app/components/ui/tabs.rb', line 37

def view_template(&block)
  div(**tabs_html_attributes, &block)
end