Class: Components::Bulma::Dropdown

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

Overview

Dropdown component

This component implements the [Bulma Dropdown](bulma.io/documentation/components/dropdown/).

## [Hoverable or Toggable](bulma.io/documentation/components/dropdown/#hoverable-or-toggable)

By default the dropdown is in Click Mode and assumes a Stimulus controller named ‘bulma–dropdown` is present to handle the click events. The controller name can be customized using the `click` option.

Set click to ‘false` to make the dropdown hoverable instead of togglable.

## Alignment

Use the ‘alignment` option to control the dropdown’s alignment. By default, it aligns to the left. Pass in ‘:right` or `:up` to change the alignment.

## Icon

Use the ‘icon` option to customize the dropdown’s icon. By default, it uses the Font Awesome angle down icon.

## Example

“‘ruby Bulma::Dropdown(“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 “‘

Instance Method Summary collapse

Constructor Details

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

Returns a new instance of Dropdown.



40
41
42
43
44
45
 
# File 'lib/components/bulma/dropdown.rb', line 40

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

Instance Method Details

#divider ⇒ Object 



81
82
83
 
# File 'lib/components/bulma/dropdown.rb', line 81

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

#item(content = nil) ⇒ Object 



69
70
71
72
73
74
75
 
# File 'lib/components/bulma/dropdown.rb', line 69

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

#link(label, path) ⇒ Object 



77
78
79
 
# File 'lib/components/bulma/dropdown.rb', line 77

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

#view_template ⇒ Object 



47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
# File 'lib/components/bulma/dropdown.rb', line 47

def view_template(&)
  div(class: "dropdown #{"is-hoverable" unless @click} #{alignment_class}".strip, **stimulus_controller) 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