Class: BulmaPhlex::Icon

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

Overview

Renders a [Bulma icon element](bulma.io/documentation/elements/icon/) with optional text and form control positioning.

Supports color and size options, optional text to the left or right of the icon, and positioning helpers (‘left`/`right`) for use inside form controls. When text is provide, the icon and text are wrapped in a container with the `icon-text` class for proper spacing, and the icon includes `aria-hidden=“true”` for accessibility.

Additional HTML attributes can be passed to the icon’s ‘<span>` element via `**html_attributes`, and to the inner `<i>` by nested them under `icon_attributes`.

## Example

render BulmaPhlex::Icon.new("fas fa-home")
render BulmaPhlex::Icon.new("fas fa-home", color: :primary, size: :large, text_right: "Home")

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(icon, text_right: nil, text_left: nil, size: nil, color: nil, left: false, right: false, **html_attributes) ⇒ Icon

Returns a new instance of Icon.



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

def initialize(icon,
               text_right: nil,
               text_left: nil,
               size: nil,
               color: nil,
               left: false,
               right: false,
               **html_attributes)
  @icon = icon
  @text_right = text_right
  @text_left = text_left
  @size = size
  @color = color
  @left = left
  @right = right
  @html_attributes = html_attributes.clone
  @icon_attributes = @html_attributes.delete(:icon_attributes) || {}
end

Class Method Details

.new(icon, text_right: nil, text_left: nil, size: nil, color: nil, left: false, right: false, **html_attributes) ⇒ Object

Parameters

  • ‘icon` — The icon class string (e.g. `“fas fa-home”`)

  • ‘color` — Sets the [color of the icon](bulma.io/documentation/elements/icon/#colors)

  • ‘size` — Sets the [size of the icon](bulma.io/documentation/elements/icon/#sizes)

  • ‘text_right` — Text to display to the right of the icon

  • ‘text_left` — Text to display to the left of the icon

  • ‘left` — If `true`, adds the `is-left` class for use in form controls

  • ‘right` — If `true`, adds the `is-right` class for use in form controls

  • ‘**html_attributes` — Additional HTML attributes for the icon span element. Nest attributes under

    `icon_attributes` to apply them to the inner `<i>` element instead.



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

def self.new(icon,
             text_right: nil,
             text_left: nil,
             size: nil,
             color: nil,
             left: false,
             right: false,
             **html_attributes)
  super
end

Instance Method Details

#view_template ⇒ Object 



61
62
63
64
65
66
67
68
69
 
# File 'lib/bulma_phlex/icon.rb', line 61

def view_template
  optional_text_wrapper do
    span { @text_left } if @text_left
    span(**mix({ class: icon_classes }, @html_attributes)) do
      i(class: @icon, **@icon_attributes)
    end
    span { @text_right } if @text_right
  end
end