Class: BulmaPhlex::Dropdown

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

Overview

Renders a [Bulma Dropdown](bulma.io/documentation/components/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 ⇒ Object 



76
77
78
 
# File 'lib/bulma_phlex/dropdown.rb', line 76

def divider
  hr(class: "dropdown-divider")
end

#item(content = nil) ⇒ Object 



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

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

#link(label, path) ⇒ Object 



72
73
74
 
# File 'lib/bulma_phlex/dropdown.rb', line 72

def link(label, path)
  a(class: "dropdown-item", 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