Class: BulmaPhlex::Button

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

Overview

Renders a [Bulma button](bulma.io/documentation/elements/button/) element.

The component can generate a ‘<button>`, `<a>`, or `<input>` element depending on the arguments provided. Supports Bulma options for color, size, **style mode**, and layout (responsive, fullwidth, outlined, inverted, rounded), as well as optional icons on the left and/or right side of the label.

The label can be passed into the component as a string or from a block.

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(label = nil, color: nil, mode: nil, size: nil, responsive: false, fullwidth: false, outlined: false, inverted: false, rounded: false, icon: nil, icon_left: nil, icon_right: nil, input: nil, **html_attributes) ⇒ Button

Returns a new instance of Button.



67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
# File 'lib/bulma_phlex/button.rb', line 67

def initialize(label = nil,
               color: nil,
               mode: nil,
               size: nil,
               responsive: false,
               fullwidth: false,
               outlined: false,
               inverted: false,
               rounded: false,
               icon: nil,
               icon_left: nil,
               icon_right: nil,
               input: nil,
               **html_attributes)
  @label = label
  @classes = self.class.classes_for(color:, mode:, size:, responsive:, fullwidth:, outlined:, inverted:, rounded:)
  @input = input
  @icon_left = icon || icon_left
  @icon_right = icon_right
  @html_attributes = html_attributes
end

Class Method Details

.classes_for(color: nil, mode: nil, size: nil, responsive: false, fullwidth: false, outlined: false, inverted: false, rounded: false) ⇒ Object

Returns an array of CSS classes for the button based on the provided options.



14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
# File 'lib/bulma_phlex/button.rb', line 14

def self.classes_for(color: nil, # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
                     mode: nil,
                     size: nil,
                     responsive: false,
                     fullwidth: false,
                     outlined: false,
                     inverted: false,
                     rounded: false)
  classes = ["button"]
  classes << "is-#{color}" if color
  classes << "is-#{mode}" if mode
  classes << "is-#{size}" if size
  classes << "is-responsive" if responsive
  classes << "is-fullwidth" if fullwidth
  classes << "is-outlined" if outlined
  classes << "is-inverted" if inverted
  classes << "is-rounded" if rounded
  classes
end

.new(label = nil, color: nil, mode: nil, size: nil, responsive: false, fullwidth: false, outlined: false, inverted: false, rounded: false, icon: nil, icon_left: nil, icon_right: nil, input: nil, **html_attributes) ⇒ Object

Parameters

  • ‘label` (positional) — Optionally pass in button label as a string

  • ‘color` — Button color: `“primary”`, `“link”`, `“info”`, `“success”`, `“warning”`, `“danger”`

  • ‘mode` — Button style mode: `“light”` or `“dark”`

  • ‘size` — Button size: `“small”`, `“normal”`, `“medium”`, `“large”`

  • ‘responsive` — If `true`, makes the button responsive

  • ‘fullwidth` — If `true`, makes the button full width

  • ‘outlined` — If `true`, renders the button outlined

  • ‘inverted` — If `true`, renders the button inverted

  • ‘rounded` — If `true`, renders the button rounded

  • ‘icon` — Icon class added to the button (e.g. `“fa-solid fa-check”`); shorthand for `icon_left`

  • ‘icon_left` — Icon class added to the left of the button text

  • ‘icon_right` — Icon class added to the right of the button text

  • ‘input` — If set, renders an `<input>` element of this type (`“button”`, `“reset”`, `“submit”`)

  • ‘**html_attributes` — Additional HTML attributes for the button element



50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
# File 'lib/bulma_phlex/button.rb', line 50

def self.new(label = nil,
             color: nil,
             mode: nil,
             size: nil,
             responsive: false,
             fullwidth: false,
             outlined: false,
             inverted: false,
             rounded: false,
             icon: nil,
             icon_left: nil,
             icon_right: nil,
             input: nil,
             **html_attributes)
  super
end

Instance Method Details

#view_template ⇒ Object 



89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
# File 'lib/bulma_phlex/button.rb', line 89

def view_template(&)
  block_content = capture(&)

  options = mix({ class: @classes }, @html_attributes)

  if @input
    input(**options, type: @input)
  else
    element_type = @html_attributes.key?(:href) ? :a : :button
    tag(element_type, **options) do
      Icon(@icon_left) if @icon_left
      button_label(block_content)
      Icon(@icon_right) if @icon_right
    end
  end
end