Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How to implement a determinate progress bar using the Radzen Progress Bar component

$
0
0

I'm new to Blazor, and I tried implementing Radzen's progress bar but I'm not sure what's the proper way to update the progress of the progress bar in my parent component. I'm also using purely Blazor interactive server at the moment.

RadzenProgressBar.razor

using Microsoft.AspNetCore.Components;using System;using System.Collections.Generic;namespace Radzen.Blazor{    /// <summary>    /// RadzenProgressBar component.    /// </summary>    /// <example>    /// <code>    /// &lt;RadzenProgressBar @bind-Value="@value" Max="200" /&gt;    /// </code>    /// </example>    public partial class RadzenProgressBar    {        /// <inheritdoc />        protected override string GetComponentCssClass()        {            var classList = new List<string>()            {"rz-progressbar"            };            switch (Mode)            {                case ProgressBarMode.Determinate:                    classList.Add("rz-progressbar-determinate");                    break;                case ProgressBarMode.Indeterminate:                    classList.Add("rz-progressbar-indeterminate");                    break;            }            classList.Add($"rz-progressbar-{ProgressBarStyle.ToString().ToLowerInvariant()}");            return string.Join(" ", classList);        }        /// <summary>        /// Gets or sets the template.        /// </summary>        /// <value>The  template.</value>        [Parameter]        public RenderFragment Template { get; set; }        /// <summary>        /// Gets or sets the mode.        /// </summary>        /// <value>The mode.</value>        [Parameter]        public ProgressBarMode Mode { get; set; }        /// <summary>        /// Gets or sets the unit.        /// </summary>        /// <value>The unit.</value>        [Parameter]        public string Unit { get; set; } = "%";        /// <summary>        /// Gets or sets the value.        /// </summary>        /// <value>The value.</value>        [Parameter]        public double Value { get; set; }        /// <summary>        /// Determines the minimum value.        /// </summary>        /// <value>The minimum value.</value>        [Parameter]        public double Min { get; set; } = 0;        /// <summary>        /// Determines the maximum value.        /// </summary>        /// <value>The maximum value.</value>        [Parameter]        public double Max { get; set; } = 100;        /// <summary>        /// Gets or sets a value indicating whether value is shown.        /// </summary>        /// <value><c>true</c> if value is shown; otherwise, <c>false</c>.</value>        [Parameter]        public bool ShowValue { get; set; } = true;        /// <summary>        /// Gets or sets the value changed callback.        /// </summary>        /// <value>The value changed callback.</value>        [Parameter]        public Action<double> ValueChanged { get; set; }        /// <summary>        /// Gets or sets the progress bar style.        /// </summary>        /// <value>The progress bar style.</value>        [Parameter]        public ProgressBarStyle ProgressBarStyle { get; set; }        /// <summary>        /// Progress in range from 0 to 1.        /// </summary>        protected double NormalizedValue => Math.Min(Math.Max((Value - Min) / (Max - Min), 0), 1);    }}

ParentComponent.razor

@using Radzen@using Radzen.Blazor@page "/"<div class="rz-m-12"><RadzenProgressBar @bind-Value="@value" min="0" max="100"/></div>@code{    double value = 25;}

Link to Radzen documentation for their Progress Barhttps://blazor.radzen.com/progressbar

And the repo of the source codehttps://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenProgressBar.razor.cs


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>