Class: Daisy::Navigation::TabsComponent::TabComponent

Inherits:
LocoMotion::BasicComponent show all
Defined in:
app/components/daisy/navigation/tabs_component.rb

Overview

A tab within a TabsComponent that can be either a link or a radio button.

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary collapse

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

Methods inherited from LocoMotion::BasicComponent

name

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Constructor Details

#initialize(*args, **kws, &block) ⇒ TabComponent

Create a new instance of the TabComponent.

Parameters:

  • args (Array) —

    Not used.

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • title (String) —

    The text to display in the tab.

  • active (Boolean) —

    Whether this tab is active (default: false).

  • checked (Boolean) —

    Whether this tab is checked (default: false).

  • disabled (Boolean) —

    Whether this tab is disabled (default: false).

  • href (String) —

    The URL to visit when the tab is clicked.

  • target (String) —

    The target attribute for the tab (e.g., “_blank”).

  • value (String) —

    The value attribute when using radio buttons.

  • css (String) —

    Additional CSS classes for styling. Common options include:

    • Size: ‘tab-lg`, `tab-md` (default), `tab-sm`, `tab-xs`

    • Width: ‘w-full`, `!w-14`

    • Cursor: ‘cursor-pointer`, `!cursor-auto`



111
112
113
114
115
116
117
118
119
120
121
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 111

def initialize(*args, **kws, &block)
  super

  @active       = config_option(:active, false)
  @checked      = config_option(:checked, false)
  @disabled     = config_option(:disabled, false)
  @href         = config_option(:href)
  @simple_title = config_option(:title)
  @target       = config_option(:target)
  @value        = config_option(:value)
end

Instance Attribute Details

#active ⇒ Object (readonly)

Returns the value of attribute active.



83
84
85
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 83

def active
  @active
end

#simple_title ⇒ Object (readonly)

Returns the value of attribute simple_title.



83
84
85
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 83

def simple_title
  @simple_title
end

Instance Method Details

#before_render ⇒ Object 



123
124
125
126
127
128
129
130
131
132
133
134
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 123

def before_render
  # Reset the name to the config option or the parent name if available
  @name = config_option(:name, loco_parent.name)

  if loco_parent.radio?
    setup_radio_button
  else
    setup_component
  end

  setup_content_wrapper unless custom_content?
end

#call ⇒ Object 



163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 163

def call
  # Not sure why we need these, but this forces the rendering below to
  # include the content blocks passed to each slot.
  # title.to_s if title?
  # custom_content.to_s if custom_content?

  capture do
    if loco_parent.radio?
      concat(part(:component))
    else
      concat(part(:component) { concat(title? ? title : @simple_title) })
    end

    concat(part(:content_wrapper) { content }) if content? && content
    concat(custom_content) if custom_content?
  end
end

#setup_component ⇒ Object 



136
137
138
139
140
141
142
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 136

def setup_component
  set_tag_name(:component, :a)
  add_css(:component, "tab")
  add_css(:component, "tab-active") if @active || @checked
  add_html(:component, { role: "tab", href: @href, target: @target, "aria-label": @simple_title })
  add_html(:component, { disabled: @disabled }) if @disabled
end

#setup_content_wrapper ⇒ Object 



158
159
160
161
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 158

def setup_content_wrapper
  add_css(:content_wrapper, "tab-content")
  add_html(:content_wrapper, { role: "tabpanel" })
end

#setup_radio_button ⇒ Object 



144
145
146
147
148
149
150
151
152
153
154
155
156
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 144

def setup_radio_button
  set_tag_name(:component, :input)
  add_css(:component, "tab")
  add_html(:component, {
    type: "radio",
    role: "tab",
    "aria-label": @simple_title,
    name: @name,
    value: @value,
    checked: @active || @checked
  })
  add_html(:component, { disabled: @disabled }) if @disabled
end