New to Telerik UI for Blazor? Start a free 30-day trial
Add Multiple Labels in a Blazor ProgressBar
Environment
Product | ProgressBar for Blazor |
Description
I want to display two labels on my ProgressBar component: one on the left side to show the current progress and another on the right side for the remaining value.
This KB article also answers the following questions:
- How can I customize the label inside a ProgressBar in Blazor?
- Is it possible to display two or more labels in a ProgressBar?
- How do I use the label template feature in the ProgressBar for Blazor?
Solution
To display two or more labels in a ProgressBar for Blazor, use the Label Template:
- Declare the
Template
inside theProgressBarLabel
label tag. - Add your desired labels in separate HTML containers.
- Use CSS to position them based on your preferences.
The code snippet below creates a ProgressBar with a custom label that includes two spans: one for the current value and another for the remaining value. The labels are positioned on the left and right sides of the ProgressBar, respectively, using CSS Flexbox for layout.
<TelerikProgressBar Value="@PBValue"
Max="@MaxValue"
Class="two-labels-progressbar">
<ProgressBarLabel Visible="true" Position="@ProgressBarLabelPosition.Center">
<Template>
<div class="label-container">
<span>Current value: @(context.Value)%</span>
<span>Remaining: @(MaxValue - context.Value)%</span>
</div>
</Template>
</ProgressBarLabel>
</TelerikProgressBar>
<style>
.two-labels-progressbar {
width: 700px;
}
.two-labels-progressbar .label-container {
width: 680px;
display: flex;
justify-content: space-between;
}
</style>
@code {
private double MaxValue { get; set; } = 50;
private double PBValue { get; set; } = 10;
}