Class: BulmaPhlex::Tabs

Inherits:
Base
  • Object
show all
Defined in:
lib/bulma_phlex/tabs.rb

Overview

Renders a Bulma tabs component.

Supports Bulma options for alignment, size, and style (boxed, toggle, rounded, fullwidth). Each tab can include an optional icon and an active state. An optional right content area (e.g. a button) can be placed alongside the tab bar. Tab switching behavior is managed via a Stimulus controller; the default controller name is bulma-phlex--tabs.

Tabs and their content panels are added via the tab builder method. An optional right-side element can be added via the right_content method.

Example

render BulmaPhlex::Tabs.new do |tabs|
  tabs.tab(id: "profile", title: "Profile", active: true) do
    "Profile content goes here"
  end

  tabs.tab(id: "settings", title: "Settings", icon: "fas fa-cog") do
    "Settings content goes here"
  end

  tabs.tab(id: "notifications", title: "Notifications", icon: "fas fa-bell") do
    "Notifications content goes here"
  end
end

Defined Under Namespace

Classes: StimulusDataAttributes

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(align: nil, size: nil, boxed: false, toggle: false, rounded: false, fullwidth: false, data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--tabs"), **html_attributes) ⇒ Tabs

Returns a new instance of Tabs.



77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
# File 'lib/bulma_phlex/tabs.rb', line 77

def initialize(align: nil,
               size: nil,
               boxed: false,
               toggle: false,
               rounded: false,
               fullwidth: false,
               data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--tabs"),
               **html_attributes)
  @align = align
  @size = size
  @boxed = boxed
  @toggle = toggle || rounded
  @rounded = rounded
  @fullwidth = fullwidth
  @data_attributes_builder = data_attributes_builder
  @html_attributes = html_attributes
  @tabs = []
  @contents = []
end

Class Method Details

.new(align: nil, size: nil, boxed: false, toggle: false, rounded: false, fullwidth: false, data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--tabs"), **html_attributes) ⇒ Object

Parameters

  • align — Aligns the tabs: "centered" or "right"
  • size — Sets the size of the tabs: "small", "medium", or "large"
  • boxed — If true, uses classic boxed style tabs
  • toggle — If true, makes the tabs look like buttons
  • rounded — If true, makes the tabs look like rounded buttons (also enables toggle)
  • fullwidth — If true, makes the tabs take up the full width of the container
  • data_attributes_builder — Provides data attributes for Stimulus integration; defaults to StimulusDataAttributes with "bulma-phlex--tabs"
  • **html_attributes — Additional HTML attributes for the outer <div> element


66
67
68
69
70
71
72
73
74
75
 
# File 'lib/bulma_phlex/tabs.rb', line 66

def self.new(align: nil,
             size: nil,
             boxed: false,
             toggle: false,
             rounded: false,
             fullwidth: false,
             data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--tabs"),
             **html_attributes)
  super
end

Instance Method Details

#right_content(&content) ⇒ Object

Sets optional content to render to the right of the tab bar (e.g. a button or action link).

Expects a block that renders the right-side content.



116
117
118
 
# File 'lib/bulma_phlex/tabs.rb', line 116

def right_content(&content)
  @right_content = content
end

#tab(id:, title:, icon: nil, active: false) ⇒ Object

Adds a tab and its associated content panel. Can be called multiple times.

  • id: — A unique identifier for the tab, used to link the tab button to its content panel
  • title: — The text label displayed on the tab button
  • icon: — Optional icon class string (e.g. "fas fa-cog") displayed alongside the title
  • active: — If true, this tab is shown as selected on initial render (default: false)

Expects a block that renders the content for this tab's panel.



105
106
107
108
109
110
111
 
# File 'lib/bulma_phlex/tabs.rb', line 105

def tab(id:, title:, icon: nil, active: false, &)
  @tabs << TabComponents::Tab.new(id:, title:, icon:, active:,
                                  data_attributes_proc: @data_attributes_builder.method(:for_tab))
  @contents << TabComponents::Content.new(id:, active:,
                                          data_attributes_proc: @data_attributes_builder.method(:for_content),
                                          &)
end

#view_template ⇒ Object 



120
121
122
123
124
125
126
127
 
# File 'lib/bulma_phlex/tabs.rb', line 120

def view_template(&)
  vanish(&)

  div(**mix({ data: @data_attributes_builder.for_container }, @html_attributes)) do
    build_tabs_with_optional_right_content
    build_content
  end
end