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.

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods inherited from LocoMotion::BasicComponent

name

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.

  • name (String) —

    The radio input's name attribute, used to group tabs together when using radio buttons. Defaults to the parent Daisy::Navigation::TabsComponent's name; override to remove a tab from its group.

  • 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


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

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.



88
89
90
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 88

def active
  @active
end

#simple_title ⇒ Object (readonly)

Returns the value of attribute simple_title.



88
89
90
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 88

def simple_title
  @simple_title
end

Instance Method Details

#before_render ⇒ Object 



138
139
140
141
142
143
144
145
146
147
148
149
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 138

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 



179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 179

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 



151
152
153
154
155
156
157
158
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 151

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 })
  add_aria(:component, label: @simple_title)
  add_html(:component, { disabled: @disabled }) if @disabled
end

#setup_content_wrapper ⇒ Object 



174
175
176
177
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 174

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

#setup_radio_button ⇒ Object 



160
161
162
163
164
165
166
167
168
169
170
171
172
 
# File 'app/components/daisy/navigation/tabs_component.rb', line 160

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