Компоненты Bootstrap в Blazor. Компонент Progress

Иногда, при разработке приложений Blazor, необходимо показать пользователю прогресс какой-либо длительной операции. Например, прогресс загрузки большого файла на сервер. Обычно, для этих целей используются небольшие анимации или компоненты типа ProgressBar. И сегодня мы рассмотрим как использовать компонент Progress из Bootstrap в наших приложениях Blazor.

Компонент Bootstrap Progress

Компонент Bootstrap Progress представляет собой настраиваемый индикатор выполнения с поддержкой составных полос, анимированных фонов и текстовых меток. Компонент Progress состоит из двух HTML-элементов div, CSS для установки ширины и нескольких атрибутов. Например:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

получим следующую полосу прогресса:

за ширину заливки отвечает атрибут style.  Также, как и прочие компоненты Bootstrap, Progress позволяет менять стиль заливки, а также анимировать заливку, используя специальные классы. В принципе, этой информации нам достаточно, чтобы собрать свой компонент Blazor ProgressBar с необходимыми настройками.

Компонент Blazor ProgressBar

Создадим новое приложение Blazor и добавим новый компонент в проект. Назовем его ProgressBar:

Теперь объявим у нашего компонента следующие параметры и методы:

@code {
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public bool ShowProgress { get; set; }
    [Parameter]
    public int CurrentValue { get; set; }
    [Parameter]
    public bool Animated { get; set; }
    [Parameter]
    public string CustomCssClass { get; set; }


    private string text = "";

    private string css = "";


    protected override void OnParametersSet()
    {
        if (ShowProgress)
        {
            
            text = $"{CurrentValue}%";
        }
        if (Animated)
        {
            css = $"{CustomCssClass} progress-bar-striped progress-bar-animated";
        }
        else
        {
            css = "";
        }

    }
}

Title — добавит заголовок для компонента; ShowProgress — указывает на то, будет ли отображаться текст в компоненте, например, «10%», «20%» и т.д. CurrentValue — текущее значение прогресса; Animated — анимировать прогресс. При анимации полоска плавно заполняет компонент; CustomCssClass — дополнительные значения атрибута class компонента, например, «bg-success» сделает заливку полоски прогресса зеленой.

В компоненте мы переопределили один из методов жизненного цикла компонентов Blazor — OnParametersSet для того, чтобы при получении новых значений параметров компонент мог корректно перерисовываться.

Теперь добавим необходимую HTML-разметку компонента:

@page "/progress"

<h3>@Title</h3>
<div class="progress">
    <div class="progress-bar @css" aria-valuetext="@text" role="progressbar" style="width: @CurrentValue%" aria-valuenow="@CurrentValue" aria-valuemin="0" aria-valuemax="100">
           @text
    </div>
</div>

Проверим работу компонента добавив на главную страницу приложения (index.razor) следующий код:

@page "/"

<button class="btn btn-success" @onclick="Click">Запуск</button>
<button class="btn btn-danger" @onclick="Reset">Сброс</button>

<ProgressBar 
     CurrentValue="@i" 
     ShowProgress="true" 
     Animated="true"
     CustomCssClass="@css"
     Title="Взлом Пентагона"/>

@code
{
    int i = 0;
    string css = "bg-success";

    public async Task Click()
    {
        while (i < 100)
        {
            i++;
            if ((i > 30) && (i < 80))
                css = "bg-warning";
            else
                if (i > 80)
                css = "bg-danger";

            await Task.Delay(100);
        }
    }

    public void Reset()
    {
        i = 0;
        css = "bg-success";
    }
}

При достижении определенного прогресса ProgressBar должен будет сменить свой цвет. Запустим приложение и посмотрим на результат:

Как видно из представленных скриншотов, компонент работает, меняя свою окраску по заданному в коде главной страницы алгоритму.

Итого

Сегодня мы научились добавлять в свои приложения Blazor компоненты Bootstrap, превращая их в полноценные компоненты Razor. При этом, нам не потребовалось использовать ничего того, чего бы мы не узнали, разрабатывая свои первые компоненты Blazor. Компонент Bootstrap Progress имеет также и другие дополнительные свойства, например, позволяя делать составные полосы загрузки, менять ширину полосы и т.д. Так что, можете самостоятельно потренироваться и создать свой собственный ProgressBar.