Class: UI::Progress

Inherits:
Phlex::HTML
  • Object
show all
Includes:
ProgressBehavior
Defined in:
app/components/ui/progress.rb

Overview

Progress - Phlex implementation

A progress indicator component for displaying task completion or loading status. Uses ProgressBehavior for shared styling logic.

Examples:

Basic usage with value

render UI::Progress.new(value: 60)

Indeterminate progress (no value)

render UI::Progress.new

With custom classes

render UI::Progress.new(value: 80, classes: "h-4")

Instance Method Summary collapse

Methods included from ProgressBehavior

#progress_classes, #progress_html_attributes, #progress_indicator_classes, #progress_indicator_style, #progress_value

Constructor Details

#initialize(value: 0, classes: "", **attributes) ⇒ Progress

Returns a new instance of Progress.

Parameters:

  • value (Numeric) (defaults to: 0) —

    Progress value between 0 and 100 (default: 0)

  • classes (String) (defaults to: "") —

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



22
23
24
25
26
 
# File 'app/components/ui/progress.rb', line 22

def initialize(value: 0, classes: "", **attributes)
  @value = value
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template ⇒ Object 



28
29
30
31
32
33
34
35
36
 
# File 'app/components/ui/progress.rb', line 28

def view_template
  div(**progress_html_attributes.deep_merge(@attributes)) do
    div(
      class: progress_indicator_classes,
      style: progress_indicator_style,
      data: {slot: "progress-indicator"}
    )
  end
end