Class: Fluxbit::ThemeButtonComponent

Inherits:
ButtonComponent show all
Includes:
Config::ThemeButtonComponent
Defined in:
app/components/fluxbit/theme_button_component.rb

Overview

The ‘Fluxbit::ThemeButtonComponent` is a round button component that toggles between dark, light, and system themes. It extends `Fluxbit::ButtonComponent` and automatically updates the theme when clicked.

Constant Summary

Constants inherited from Component

Component::ComponentObj

Instance Method Summary collapse

Methods included from Config::ThemeButtonComponent

styles, #styles

Methods inherited from ButtonComponent

#before_render, #declare_classes, #declare_disabled, #declare_selected, #declare_size

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::ThemeButtonComponent

Initializes the theme button component with the given properties.

Parameters:

  • props (Hash) —

    The properties to customize the theme button.

Options Hash (**props):

  • :color (Symbol, String) —

    The color style of the button (default: :transparent)

  • :size (Symbol, String) —

    The size of the button (default: 2)

  • :pill (Boolean) — default: true —

    Makes the button round

  • **props (Hash) —

    Remaining options declared as HTML attributes.



19
20
21
22
23
24
25
26
27
28
29
30
31
 
# File 'app/components/fluxbit/theme_button_component.rb', line 19

def initialize(**props)
  # Set default values specific to theme button
  props[:pill] = true unless props.key?(:pill)
  props[:color] ||= :transparent
  props[:size] ||= 2
  props[:remove_dropdown_arrow] = true

  # Add Stimulus controller
  props["data-controller"] = [props["data-controller"], "fx-theme-button"].compact.join(" ")
  props["data-action"] = [props["data-action"], "click->fx-theme-button#toggle"].compact.join(" ")

  super(**props)
end

Instance Method Details

#call ⇒ Object 



33
34
35
36
 
# File 'app/components/fluxbit/theme_button_component.rb', line 33

def call
  concat(render_theme_button)
  concat(render_popover_or_tooltip.to_s)
end