Class: Daisy::Actions::DropdownComponent

Inherits:
LocoMotion::BaseComponent show all
Includes:
ViewComponent::SlotableDefault
Defined in:
app/components/daisy/actions/dropdown_component.rb

Overview

Note:

The dropdown uses slots for both the activator and menu items, allowing for maximum flexibility in how the dropdown is triggered and what content it displays.

The Dropdown component shows a Button, or any other component you wish, with a hovering menu that opens on click (or hover). It provides a flexible way to create dropdown menus with customizable triggers and content.

Defined Under Namespace

Classes: ItemComponent

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(title = nil, **kws, &block) ⇒ DropdownComponent

Creates a new instance of the DropdownComponent.

Parameters:

  • title (String) (defaults to: nil) —

    The title of the dropdown. Will be used as the button text if no custom button or activator is provided.

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • title (String) —

    The title of the dropdown. You can also pass this as the first argument.



174
175
176
177
178
 
# File 'app/components/daisy/actions/dropdown_component.rb', line 174

def initialize(title = nil, **kws, &block)
  super

  @simple_title = config_option(:title, title)
end

Instance Method Details

#before_render ⇒ Object

Adds the relevant Daisy classes to the component.



183
184
185
186
 
# File 'app/components/daisy/actions/dropdown_component.rb', line 183

def before_render
  setup_component
  setup_menu
end

#default_button ⇒ Object

Provides a default button if no button or custom activator is provided.



222
223
224
 
# File 'app/components/daisy/actions/dropdown_component.rb', line 222

def default_button
  Daisy::Actions::ButtonComponent.new(title: @simple_title)
end

#setup_component ⇒ Object

Add the dropdown CSS class to the component.



191
192
193
 
# File 'app/components/daisy/actions/dropdown_component.rb', line 191

def setup_component
  add_css(:component, "dropdown")
end

#setup_menu ⇒ Object

Make the menu a <ul> / <li> element and add the relevant Daisy classes. All of the defaults use the where: prefix (zero specificity), so any classes passed via menu_css win.



200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
 
# File 'app/components/daisy/actions/dropdown_component.rb', line 200

def setup_menu
  set_tag_name(:menu, :ul)

  # Core menu structure and styling.
  add_css(:menu, "dropdown-content where:menu where:bg-base-100 where:rounded-box where:shadow")

  # Default sizing, padding, and stacking.
  add_css(:menu, "where:w-52 where:p-2 where:z-[1]")

  # The default border keeps the menu visible when it opens over content
  # that shares its background color (`menu_css: "border-0"` removes it).
  add_css(:menu, "where:border where:border-base-300")

  # The vertical margin separates the menu from the trigger; only the
  # margin on the side the menu opens from takes effect
  # (`menu_css: "my-0"` removes it).
  add_css(:menu, "where:my-0.5")
end