Visão geral do progresso linear Blazor

    O componente Ignite UI for Blazor Linear Progress Indicator fornece um indicador visual do processo de um aplicativo conforme ele muda. O indicador IgbLinearProgress atualiza sua aparência conforme seu estado muda. Além disso, você pode estilizar esse componente com uma escolha de cores em listras ou sólidos.

    Blazor Linear Progress Example

    Usage

    Antes de usar o IgbLinearProgress, você precisa registrá-lo 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 ao componente IgbCalendar. O seguinte precisa 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 o atributo variant. Existem cinco tipos de indicadores de progresso linear -primário (padrão), erro, sucesso, informação e aviso.

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

    Striped Progress

    Você pode tornar o indicador listrado, usando a propriedade striped:

    Indeterminate Progress

    Se quiser rastrear um processo que não foi determinado com precisão, você pode definir a propriedade indeterminate.

    Animation Duration

    A propriedade animationDuration é usada para especificar quanto tempo o ciclo de animação deve levar. Ela toma 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 a propriedade labelAlign. 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 o atributo hideLabel.

    A propriedade labelFormat pode ser usada para personalizar o rótulo padrão IgbLinearProgress.

    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

    The IgbLinearProgress component exposes CSS parts for almost all of its inner elements:

    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.

    Using this CSS parts we have almost full control of the Linear Progress styling.

    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