Class: BulmaPhlex::Dropdown

Inherits:
Base
  • Object
show all
Defined in:
lib/bulma_phlex/dropdown.rb

Overview

Renders a Bulma Dropdown component.

Supports options for alignment and trigger icon, and can operate in either click-to-toggle or hover mode. Click mode integrates with a Stimulus controller; hover mode requires no JavaScript.

Example

render BulmaPhlex::Dropdown.new("Next Actions...") do |dropdown|
  dropdown.link "View Profile", "/profile"
  dropdown.link "Go to Settings", "/settings"
  dropdown.divider
  dropdown.item("This is just a text item")
  dropdown.item do
    div(class: "has-text-weight-bold") { "This is a bold item" }
  end
end

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(label, click: "bulma-phlex--dropdown", alignment: "left", icon: "fas fa-angle-down", **html_attributes) ⇒ Dropdown

Returns a new instance of Dropdown.



33
34
35
36
37
38
39
40
 
# File 'lib/bulma_phlex/dropdown.rb', line 33

def initialize(label, click: "bulma-phlex--dropdown", alignment: "left", icon: "fas fa-angle-down",
               **html_attributes)
  @label = label
  @click = click
  @alignment = alignment
  @icon = icon
  @html_attributes = html_attributes
end

Class Method Details

.new(label, click: "bulma-phlex--dropdown", alignment: "left", icon: "fas fa-angle-down", **html_attributes) ⇒ Object

Parameters

  • label — The text displayed in the dropdown trigger button
  • click — Stimulus controller name for toggling; set to false for hover mode instead
  • alignment — Alignment of the dropdown menu: "left" (default), "right", or "up"
  • icon — Icon class for the trigger button (default: "fas fa-angle-down")
  • **html_attributes — Additional HTML attributes for the outermost dropdown element


28
29
30
31
 
# File 'lib/bulma_phlex/dropdown.rb', line 28

def self.new(label, click: "bulma-phlex--dropdown", alignment: "left", icon: "fas fa-angle-down",
             **html_attributes)
  super
end

Instance Method Details

#divider(**html_attributes) ⇒ Object 



84
85
86
 
# File 'lib/bulma_phlex/dropdown.rb', line 84

def divider(**html_attributes)
  hr(**mix({ class: "dropdown-divider" }, html_attributes))
end

#header(label, divider: false) ⇒ Object

Adds a non-clickable header item to the dropdown menu. Optionally add a divider before the header with the divder: true parameter.



66
67
68
69
 
# File 'lib/bulma_phlex/dropdown.rb', line 66

def header(label, divider: false)
  self.divider if divider
  div(class: "dropdown-item has-text-weight-semibold is-unselectable") { label }
end

#item(content = nil, **html_attributes) ⇒ Object 



71
72
73
74
75
76
77
78
 
# File 'lib/bulma_phlex/dropdown.rb', line 71

def item(content = nil, **html_attributes, &)
  attributes = mix({ class: "dropdown-item" }, html_attributes)
  if block_given?
    div(**attributes, &)
  else
    div(**attributes) { content }
  end
end

#link(label, path, **html_attributes) ⇒ Object 



80
81
82
 
# File 'lib/bulma_phlex/dropdown.rb', line 80

def link(label, path, **html_attributes)
  a(**mix({ class: "dropdown-item" }, html_attributes), href: path) { label }
end

#view_template ⇒ Object 



42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
# File 'lib/bulma_phlex/dropdown.rb', line 42

def view_template(&)
  div(**mix({ class: dropdown_classes, **stimulus_controller }, @html_attributes)) do
    div(class: "dropdown-trigger") do
      button(
        class: "button",
        aria_haspopup: "true",
        aria_controls: "dropdown-menu",
        **stimulus_action
      ) do
        span { @label }
        span(class: "icon is-small") do
          i(class: @icon, aria_hidden: "true")
        end
      end
    end

    div(class: "dropdown-menu", id: "dropdown-menu", role: "menu") do
      div(class: "dropdown-content", &)
    end
  end
end