Class: Daisy::Layout::JoinComponent

Inherits:
LocoMotion::BaseComponent show all
Defined in:
app/components/daisy/layout/join_component.rb

Overview

Note:

DaisyUI gives the group's corner rounding to the join's first and last direct children. with_item wraps its content in an extra <div>, so a bordered control (button, input) nested inside it renders with square corners. Join buttons with the with_button slot or direct content instead, and reserve with_item for plain / custom content.

Note:

items, buttons, radios, and block content are mutually exclusive — only the first populated one (in that order) renders, so mixing slot types on the same daisy_join silently drops the rest.

The JoinComponent combines multiple elements into a cohesive group without gaps between them. Common use cases include:

  • Button groups for toolbars.
  • Input fields with prefix/suffix elements.
  • Segmented navigation controls.
  • Pagination controls.

Items can be added using the with_item slot (which automatically adds the join-item CSS class) or the content method (where you must add the class manually).

Constant Summary

Constants inherited from LocoMotion::BaseComponent

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

Instance Attribute Summary

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

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

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

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

Creates a new Join component.

Parameters:

  • kws (Hash) —

    Keyword arguments for customizing the join.

Options Hash (**kws):

  • css (String) —

    Additional CSS classes for styling. Common options include:

    • Direction: join-vertical for vertical stacking
    • Size: min-w-32, w-full
    • Spacing: gap-0, gap-px (if gaps are needed)


96
97
98
 
# File 'app/components/daisy/layout/join_component.rb', line 96

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

Instance Method Details

#before_render ⇒ Object

Sets up the component's CSS classes.



103
104
105
 
# File 'app/components/daisy/layout/join_component.rb', line 103

def before_render
  add_css(:component, "join")
end

#call ⇒ Object

Renders all joined items, buttons, or radios in sequence, or renders content if none are provided.



111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
# File 'app/components/daisy/layout/join_component.rb', line 111

def call
  part(:component) do
    if items?
      items.each do |item|
        concat(item)
      end
    elsif buttons?
      buttons.each do |button|
        concat(button)
      end
    elsif radios?
      radios.each do |radio|
        concat(radio)
      end
    else
      content
    end
  end
end