Class: Fluxbit::ProgressComponent

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

Overview

The ‘Fluxbit::ProgressComponent` is a customizable progress bar component that extends `Fluxbit::Component`. It allows you to create progress indicators with various styles, sizes, colors, and label positioning options to display completion status or loading progress.

Examples:

Basic usage

= fx_progress(progress: 45)

With labels

= fx_progress(progress: 75, text_label: "Loading", label_progress: true)

See Also:

  • For detailed documentation.

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

Initializes the progress component with the given properties.

Parameters:

  • **props (Hash) —

    The properties to customize the component.

  • props (Hash) —

    a customizable set of options

Options Hash (**props):

  • :progress (Integer) — default: 0 —

    The progress percentage (0-100).

  • :color (Symbol, String) — default: :default —

    The color theme of the progress bar.

  • :size (Integer) — default: 1 —

    The size of the progress bar (0-3).

  • :text_label (String) — default: nil —

    Label text to display with the progress bar.

  • :label_progress (Boolean) — default: false —

    Whether to show the progress percentage.

  • :label_text (Boolean) — default: false —

    Whether to show the text label.

  • :progress_label_position (Symbol) — default: :inside —

    Position of progress label (:inside or :outside).

  • :text_label_position (Symbol) — default: :outside —

    Position of text label (:inside or :outside).

  • :label_html (Hash) — default: {} —

    HTML attributes for label elements. Supports :remove_class.

  • :stimulus (Boolean) — default: false —

    Whether to add Stimulus controller data attributes for JavaScript interactions.

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

    CSS classes to remove from the default class list.

  • **props (Hash) —

    Remaining options as HTML attributes.



36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
# File 'app/components/fluxbit/progress_component.rb', line 36

def initialize(**props)
  super
  @props = props

  # Use options() function with config defaults
  @progress = options(@props.delete(:progress), default: @@progress)
  @color = options(@props.delete(:color), collection: styles[:bar][:colors].keys, default: @@color)
  @size = options(@props.delete(:size), default: @@size)
  @text_label = options(@props.delete(:text_label), default: @@text_label)
  @label_progress = options(@props.delete(:label_progress), default: @@label_progress)
  @label_text = options(@props.delete(:label_text), default: @@label_text)
  @progress_label_position = options(@props.delete(:progress_label_position),
                                    collection: [ :inside, :outside ],
                                    default: @@progress_label_position)
  @text_label_position = options(@props.delete(:text_label_position),
                                collection: [ :inside, :outside ],
                                default: @@text_label_position)
  @label_html = options(@props.delete(:label_html), default: @@label_html)
  @stimulus = options(@props.delete(:stimulus), default: @@stimulus)

  # Sanitize progress value
  @progress = [ @progress.to_i, 0 ].max
  @progress = [ @progress, 100 ].min

  # Apply styling
  declare_classes

  # Handle class removal
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
end

Instance Method Details

#call ⇒ Object 



67
68
69
70
71
72
73
74
 
# File 'app/components/fluxbit/progress_component.rb', line 67

def call
  content_tag(:div) do
    safe_join([
      render_outside_labels,
      render_progress_container
    ].compact)
  end
end