Visão geral do progresso linear Blazor

    O componente Ignite UI for Blazor Linear Progress Indicator fornece um indicador visual do processo de uma aplicação à medida que ele muda. OIgbLinearProgress indicador atualiza sua aparência conforme seu estado muda. Além disso, você pode estilizar esse componente com uma escolha de cores em listras ou lisas.

    Blazor Linear Progress Example

    Usage

    Antes de usá-losIgbLinearProgress, você precisa registrá-los da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbCalendar componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbLinearProgress Value=100 />

    Progress Types

    Você pode definir o tipo do seu indicador, usando oVariant atributo. Existem cinco tipos de indicadores lineares de progresso -primário (padrão), erro, sucesso, informação e aviso.

    <IgbLinearProgress Value=100 Variant=@ProgressBaseVariant.Success />

    Striped Progress

    Você pode fazer o indicador listrado, usando aStriped propriedade:

    Indeterminate Progress

    Se você quiser rastrear um processo que não está determinado com precisão, pode definir aIndeterminate propriedade.

    Animation Duration

    AAnimationDuration propriedade é usada para especificar quanto tempo o ciclo de animação deve levar. Ele recebe como valor um número que representa a duração da animação em milissegundos.

    <IgbLinearProgress AnimationDuration=5000 Indeterminate=true />

    Text Properties

    Você pode alinhar o valor padrão usando aLabelAlign propriedade. Os valores permitidos são top, bottom, top-start, top-end, bottom-start e bottom-end.

    Para ocultar o rótulo padrão do indicador de progresso, use oHideLabel atributo.

    ALabelFormat propriedade pode ser usada para personalizar oIgbLinearProgress rótulo padrão.

    O exemplo a seguir demonstra a configuração acima:

    Dynamic Progress

    Você pode alterar dinamicamente o valor do indicador de progresso usando controles externos como botões. Para conseguir isso, podemos vincular o valor a uma propriedade de classe:

    Styling

    OIgbLinearProgress componente expõe partes CSS para quase todos os seus elementos internos:

    Nome Descrição
    track Área de trilha do anel de progresso.
    fill A área do indicador de progresso.
    striped O indicador de progresso listrado.
    label O rótulo do indicador de progresso.
    value O valor do rótulo de progresso.
    indeterminate O estado indeterminado do progresso.
    primary O indicador de progresso do estado primário.
    danger O estado de erro do indicador de progresso.
    warning O estado de alerta do indicador de progresso.
    info O estado das informações do indicador de progresso.
    success O estado de sucesso do indicador de progresso.

    Usando essas partes CSS, temos controle quase total do estilo Linear Progress.

    igc-linear-progress::part(track){
  background-color: var(--ig-gray-300)
}

igc-linear-progress::part(fill){
  background-color: var(--ig-primary-300)
}

igc-linear-progress::part(label){
  color: var(--ig-primary-300)
}

    API References

    Additional Resources