@page "/progressbar"
@page "/docs/guides/components/progressbar.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    ProgressBar
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>ProgressBar</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a linear progress indicator with determinate mode (specific value) and indeterminate mode (ongoing process), configurable min/max value ranges, optional value label display with <code>ShowValue</code>, and accessibility support through <code>AriaLabel</code> property.
</RadzenText>

<RadzenText Anchor="progressbar#progressbar-determinate" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    ProgressBar in determinate mode, Get and Set the value
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
    As all Radzen Blazor input components the <strong>ProgressBar</strong> has a <code>Value</code> property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input. To hide the label use <code>ShowValue="false"</code>
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    By design Material and Fluent themes do not include a value label inside the ProgressBar. To hide the label use <code>ShowValue="false"</code>.
</RadzenText>
<RadzenExample ComponentName="ProgressBar" Example="ProgressBarDeterminate">
    <ProgressBarDeterminate />
</RadzenExample>

<RadzenText Anchor="progressbar#progressbar-indeterminate" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    ProgressBar in indeterminate mode
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Mode="ProgressBarMode.Indeterminate"</code> to display an animated progress bar when the completion time is unknown.
</RadzenText>
<RadzenExample ComponentName="ProgressBar" Example="ProgressBarIndeterminate">
    <ProgressBarIndeterminate />
</RadzenExample>

<RadzenText Anchor="progressbar#progressbar-min-max-values" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    ProgressBar Min and Max values
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    By default, the value range is between 0 and 100.
    Use the <code>Min</code> and <code>Max</code> properties to set a custom range.
</RadzenText>
<RadzenExample ComponentName="ProgressBar" Example="ProgressBarMinMaxValues">
    <ProgressBarMinMaxValues />
</RadzenExample>

<RadzenText Anchor="progressbar#accessibility" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Accessibility
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>AriaLabel</code> property to provide a descriptive label for screen readers. This is especially important when <code>ShowValue="false"</code> as screen readers need context about what the progress bar represents (e.g., "Upload progress", "Loading", "Download status").
</RadzenText>