Class: BulmaPhlex::FormField

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

Overview

A ‘field` container that groups a label, control input, and optional help text using the [Bulma form field](bulma.io/documentation/form/general/#form-field) pattern.

Supports an optional label (provided as a string or block via the ‘label` method), optional **help text**, optional icons (left and/or right), and layout options for integrating with Bulma’s column and grid systems. The form control content is set via the ‘control` method (or a block passed directly to the component).

If the label is passes as a string argument, the any additional html attributes can also be included as arguments.

## References

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(help: nil, icon_left: nil, icon_right: nil, column: nil, grid: nil) ⇒ FormField

Returns a new instance of FormField.



33
34
35
36
37
38
39
 
# File 'lib/bulma_phlex/form_field.rb', line 33

def initialize(help: nil, icon_left: nil, icon_right: nil, column: nil, grid: nil)
  @help = help
  @icon_left = icon_left
  @icon_right = icon_right
  @column = column
  @grid = grid
end

Class Method Details

.new(help: nil, icon_left: nil, icon_right: nil, column: nil, grid: nil) ⇒ Object

Parameters

  • ‘help` — Optional help text displayed below the input

  • ‘icon_left` — Icon class for an icon to the left of the input (e.g. `“fas fa-user”`)

  • ‘icon_right` — Icon class for an icon to the right of the input (e.g. `“fas fa-check”`)

  • ‘column` — If `true`, makes the field a column; a size string (e.g. `“half”`) sets the size for all breakpoints; a hash (e.g. `{ mobile: “full”, desktop: “half” }`) sets responsive sizes

  • ‘grid` — If `true`, makes the field a grid cell; a size string sets the cell size



29
30
31
 
# File 'lib/bulma_phlex/form_field.rb', line 29

def self.new(help: nil, icon_left: nil, icon_right: nil, column: nil, grid: nil)
  super
end

Instance Method Details

#control(&block) ⇒ Object

Sets the form control content for the field (e.g. an ‘<input>`, `<select>`, or `<textarea>`). If not called explicitly, the block passed directly to the component is used as the control.

Expects a block that renders the form control element.



61
62
63
 
# File 'lib/bulma_phlex/form_field.rb', line 61

def control(&block)
  @control_builder = block
end

#html_label ⇒ Object

in order to use the method name ‘label`, we need to grab a reference to the method on the base class so it is still available to us



43
 
# File 'lib/bulma_phlex/form_field.rb', line 43

alias html_label label

#label(label_string = nil, **html_attributes, &block) ⇒ Object

Sets the label for the field.

  • ‘label_string` — A plain text label string. If omitted, a block must be provided instead.

Optionally expects a block that renders a custom label (e.g. with a link or icon inside). Only one of ‘label_string` or a block should be provided.



51
52
53
54
55
 
# File 'lib/bulma_phlex/form_field.rb', line 51

def label(label_string = nil, **html_attributes, &block)
  @label_string = label_string
  @label_attributes = html_attributes
  @label_builder = block
end

#view_template(&implicit_control) ⇒ Object 



65
66
67
68
69
70
71
72
73
74
75
76
 
# File 'lib/bulma_phlex/form_field.rb', line 65

def view_template(&implicit_control)
  @control_builder = implicit_control if @control_builder.nil? && implicit_control
  vanish(&implicit_control)

  div(class: field_classes) do
    render_label
    render FormControl.new(icon_left: @icon_left, icon_right: @icon_right) do
      raw @control_builder.call
    end
    p(class: "help") { @help } if @help
  end
end