logo

Ruby Dropdown Menu Component

InfoGeneratePackages

The given code defines a Ruby class named `DropdownComponent` that inherits from `ApplicationComponent`. Its purpose is to generate the HTML structure for a dropdown menu component using Ruby syntax. Within the `template` method, it uses a DSL to construct HTML elements.

The dropdown component is initialized with a `details` tag and assigned the class `dropdown`. A `summary` tag within it, styled with `class="m-1 btn"`, acts as the trigger for the dropdown with the display text "open or close". When triggered, it reveals or hides the dropdown content, which comprises an unordered list (`ul`) with the specified styling classes for shadow, background, rounded corners, and width. This list contains two list items (`li`), each with an anchor (`a`) tag representing menu items named "Item 1" and "Item 2".

Notable details include the use of specific CSS classes to modify the appearance and behavior of the dropdown, such as positioning (`dropdown-end`, `dropdown-top`, etc.), open state (`dropdown-open`), and interaction mode (`dropdown-hover`). The structured and modular approach facilitates the customization and reusability of the dropdown component within the application.

# frozen_string_literal: true

# Dropdown can be modified by the following classes:
# dropdown-end, dropdown-top, dropdown-bottom, dropdown-left
# dropdown-right, dropdown-hover, dropdown-open
class DropdownComponent < ApplicationComponent
  def template
    details(class: "dropdown") do
      summary(class: "m-1 btn") { "open or close" }
      ul(class: "p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52") do
        li { a { "Item 1" } }
        li { a { "Item 2" } }
      end
    end
  end
end

Children