ProgressBar

Description

This component represents a progress bar in Blazor using the Gap.Blazor.ProgressBar model. It uses the Telerik ProgressBar component to visually indicate progress, supporting both determinate and indeterminate states based on the model’s value and range.

Usage

@if (this.model.Visible)
{
    <WMStyleBase model=@progressBar></WMStyleBase>
    <div class="@progressBar.GetStringClasses()">
        <TelerikProgressBar Indeterminate="this.Indeterminate"
                            Max="@this.Maximum"
                            Value="@this.Value">
            <ProgressBarLabel Visible="false"></ProgressBarLabel>
        </TelerikProgressBar>
    </div>
}

Properties

  • ProgressBar: Instance of the Gap.Blazor.ProgressBar model.

  • Maximum: The maximum value of the progress bar (default is 100).

  • Value: The current progress value (default is 0).

  • Indeterminate: Boolean indicating whether the progress bar is in an indeterminate state (true when Value == 0).

Methods

  • OnInitialized(): Subscribes to the model’s NotifyModelChanged event and initializes the progress bar state.

  • AdjustProgressBar(): Calculates the effective Maximum and Value based on the model’s Minimum, Maximum, and Value properties. Sets Indeterminate to true if Value == 0.

  • NotifyModelChanged(): Called when the model changes. Updates the progress bar state and triggers UI refresh.

Dynamic Rendering

  • TelerikProgressBar: Renders the progress bar UI.

  • Indeterminate Mode: Automatically enabled when the value is zero.

  • Label: Hidden by default using <ProgressBarLabel Visible="false" />.

Events

  • NotifyModelChanged: Triggers a recalculation of the progress bar’s state and updates the UI.

PreviousPictureBoxNextRadioButton

Last updated