Class: BulmaPhlex::Tabs

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

Overview

Renders a [Bulma tabs](bulma.io/documentation/components/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