DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

ProgressBar

in namespace DotVVM.Framework.Controls.Bootstrap

Renders Bootstrap progress bar.

Properties

Name Type Description Notes Default Value
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
1
Color ContextualColor Gets or sets contextual color.
attribute
inner element
static value
bindable
default
0
DataContext Object Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value.
attribute
inner element
static value
bindable
default
HiddenTemplate ITemplate Gets or sets additional hidden information of progress bar.
attribute
inner element
static value
bindable
default
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
IsAnimated Boolean Gets or sets if progress bar is animated.
attribute
inner element
static value
bindable
default
False
IsStriped Boolean Gets or sets if progress bar is striped.
attribute
inner element
static value
bindable
default
False
Value Double Gets or sets value of current progress.
attribute
inner element
static value
bindable
default
100
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

Events

Name Type Description

Usage & Scenarios

Renders Bootstrap Progress Bar widget.

http://getbootstrap.com/components/#progress

HTML Rendered by the Control

Sample 1: Basic Progress Bar

The ProgressBar control has Value property that sets value of current progress. Contextual color of ProgressBar can be set with Color property.

To show ProgressBar custom text or label, place it inside the control. Default label is blank.

It is also possible to have hidden label in progress bar with HiddenTemplate element.

<bs:ProgressBar Value="25">
  25% completed...
</bs:ProgressBar>

<bs:ProgressBar Color="Info" Value="85">
  <HiddenTemplate>
    69% completed...
  </HiddenTemplate>
</bs:ProgressBar>

Sample 2: Striped and Animated Progress Bars

You can set ProgressBar to have striped design with IsStriped property.

Is is also possible to animate ProgressBar with IsAnimated property.

<bs:ProgressBar Color="Danger" IsStriped="true" Value="39">
  39%
</bs:ProgressBar>


<bs:ProgressBar Color="Success" IsStriped="true" IsAnimated="true" Value="100">
  COMPLETED
</bs:ProgressBar>

Sample 3: Stacked Progress Bar

You can create Bootstrap stacked ProgressBars using StackedProgressBar control.

<bs:StackedProgressBar>
  <bs:ProgressBar Color="Success" Value="25">
    25%
  </bs:ProgressBar>

  <bs:ProgressBar Color="Info" Value="25">
    25%
  </bs:ProgressBar>

  <bs:ProgressBar Color="Warning" Value="11">
    11%
  </bs:ProgressBar>

  <bs:ProgressBar Color="Danger" Value="14">
    14%
  </bs:ProgressBar>
</bs:StackedProgressBar>

Sample 4: ProgressBar - Bindings

All properties in ProgressBar are bindable.

  <bs:ProgressBar Value="{value: Width}" Color="{value: Color}" IsStriped="{value: Striped}" IsAnimated="{value: Animated}">
    {{value: Width}}%
  </bs:ProgressBar>

<dot:Button Text="Change width" Click="{command: ChangeWidth()}" />
<dot:Button Text="Change color" Click="{command: ChangeColor()}" />
<dot:Button Text="Change striped" Click="{command: ChangeStriped()}" />
<dot:Button Text="Change animated" Click="{command: ChangeAnimated()}" />
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DotVVM.Framework.Controls.Bootstrap;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ProgressBar.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public double Width { get; set; } = 95;
        public ContextualColor Color { get; set; } = ContextualColor.Info;
        public bool Striped { get; set; } = true;
        public bool Animated { get; set; } = true;

        public void ChangeWidth()
        {
            var random = new Random();
            Width = random.Next(101);
        }

        public void ChangeColor()
        {
            var colors = Enum.GetValues(typeof(ContextualColor)).Cast<ContextualColor>().ToList(); ;
            var random = new Random();
            var c = random.Next(colors.Count);
            Color = colors[c];
        }

        public void ChangeStriped()
        {
            Striped = !Striped;
        }

        public void ChangeAnimated()
        {
            Animated = !Animated;
        }
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message