Class: BulmaPhlex::Icon

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

Overview

Renders a Bulma icon element 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
  • size — Sets the size of the icon
  • 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