Class: Fluxbit::ButtonComponent

Inherits:
Component
  • Object
show all
Includes:
Config::ButtonComponent
Defined in:
app/components/fluxbit/button_component.rb

Overview

The ‘Fluxbit::ButtonComponent` is a customizable button component that extends `Fluxbit::Component`. It allows you to create buttons with various styles, sizes, colors, and supports additional features like popovers and tooltips.

Direct Known Subclasses

ThemeButtonComponent

Constant Summary

Constants inherited from Component

Component::ComponentObj

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #icon, #options, #popover?, #random_id, #remove_class, #remove_class_from_props, #render_popover_or_tooltip, #target, #tooltip?

Methods included from IconHelpers

#chevron_double_left, #chevron_double_right, #chevron_down, #chevron_left, #chevron_right, #chevron_up, #close_icon, #ellipsis_horizontal, #eye_icon, #eye_slash_icon, #plus_icon

Constructor Details

#initialize(**props) ⇒ Fluxbit::ButtonComponent

Initializes the button component with the given properties.

Parameters:

  • props (Hash) —

    The properties to customize the button.

Options Hash (**props):

  • :form (Object) — default: nil —

    The form object associated with the button.

  • :as (Symbol, String) —

    The HTML tag to use for the button (e.g., ‘:button`, `:a`).

  • :pill (Boolean) — default: false —

    Determines if the button has pill-shaped edges.

  • :color (Symbol, String) —

    The color style of the button.

  • :size (Symbol, String) —

    The size of the button (e.g., ‘0` to `4`).

  • :disabled (Boolean) — default: false —

    Sets the button to a disabled state.

  • :selected (Boolean) — default: false —

    Makes the button appear darker to indicate selected state.

  • :remove_class (String) — default: '' —

    Classes to remove from the default class list.

  • :popover_text (String) — default: nil —

    Popover text (from Fluxbit::Component).

  • :popover_placement (Symbol) — default: :right —

    Popover placement (e.g., ‘:right`, `:left`, `:top`, `:bottom`) (from Fluxbit::Component).

  • :popover_trigger (Symbol) — default: :hover —

    Popover trigger (e.g., ‘:hover`, `:click`) (from Fluxbit::Component).

  • :tooltip_text (String) — default: nil —

    Tooltip text (from Fluxbit::Component).

  • :tooltip_placement (Symbol) — default: :right —

    Tooltip placement (e.g., ‘:right`, `:left`, `:top`, `:bottom`) (from Fluxbit::Component).

  • :tooltip_trigger (Symbol) — default: :hover —

    Tooltip trigger (e.g., ‘:hover`, `:click`) (from Fluxbit::Component).

  • **props (Hash) —

    Remaining options declared as HTML attributes.



40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
# File 'app/components/fluxbit/button_component.rb', line 40

def initialize(**props)
  super
  @props = props
  @form = @props.delete(:form)
  @content = @props.delete(:content)
  @as = options @props.delete(:as), default: @@as
  @pill = options @props.delete(:pill), default: @@pill
  @color = options (@props.delete(:color) || "").to_sym, collection: styles[:colors].keys, default: @@color
  @selected = options @props.delete(:selected), default: @@selected
  @grouped = options @props.delete(:grouped), default: false
  @first_button = options @props.delete(:first_button), default: false
  @last_button = options @props.delete(:last_button), default: false
  @outline = @color.to_s.end_with?("_outline")
  @full_sized = options(@props.delete(:full_sized), default: true)
  @remove_dropdown_arrow = options(@props.delete(:remove_dropdown_arrow), default: false)
  declare_size(@props.delete(:size) || @@size)
  declare_disabled
  declare_selected
  declare_classes
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
end

Instance Method Details

#before_render ⇒ Object 



101
102
103
 
# File 'app/components/fluxbit/button_component.rb', line 101

def before_render
  add_popover_or_tooltip
end

#call ⇒ Object 



105
106
107
108
109
110
111
 
# File 'app/components/fluxbit/button_component.rb', line 105

def call
  @props["data-dropdown-toggle"] = dropdown.get_item if dropdown?

  concat(render_button)
  concat(render_popover_or_tooltip.to_s)
  concat(dropdown&.to_s || "")
end

#declare_classes ⇒ Object 



72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
# File 'app/components/fluxbit/button_component.rb', line 72

def declare_classes
  add(class: styles[:pill][@pill ? :on : :off], to: @props, first_element: true) unless @outline
  add(class: styles[:outline][:pill][@pill ? :on : :off], to: @props, first_element: true) if @outline
  add(class: styles[:outline][@outline ? :on : :off], to: @props, first_element: true)
  add(class: styles[:base], to: @props, first_element: true)
  add(
    class: (@color.in?(styles[:colors].keys) ? styles[:colors][@color] : styles[:colors][:info]),
    to: @props,
    first_element: true
  )
  add(class: styles[:full_sized], to: @props) if @full_sized
  add(class: styles[:inner][:base], to: @props) if @grouped
  add(class: styles[:inner][:position][:start], to: @props) if @grouped && @first_button
  add(class: styles[:inner][:position][:end], to: @props) if @grouped && @last_button
  add(class: styles[:inner][:position][:middle], to: @props) if @grouped && !@last_button && !@first_button
end

#declare_disabled ⇒ Object 



89
90
91
92
93
 
# File 'app/components/fluxbit/button_component.rb', line 89

def declare_disabled
  return unless @props[:disabled].present? && @props[:disabled] == true

  add(class: styles[:disabled], to: @props, first_element: true)
end

#declare_selected ⇒ Object 



95
96
97
98
99
 
# File 'app/components/fluxbit/button_component.rb', line 95

def declare_selected
  return unless @selected.present? && @selected == true

  add(class: styles[:selected], to: @props, first_element: true)
end

#declare_size(size) ⇒ Object 



62
63
64
65
66
67
68
69
70
 
# File 'app/components/fluxbit/button_component.rb', line 62

def declare_size(size)
  return if size.blank?

  add(
    class: (styles[:size][size.to_i]),
    to: @props,
    first_element: true
  )
end