Componente

Progress

Uma barra de progresso determinada ou indeterminada. Defina um valor contra um máximo, colora e dimensione, escolha a forma, mostre um rótulo e um valor formatado dentro ou fora da trilha, ou faça template do valor por completo.

Rótulo e valor

Digitising 30%

Cataloguing 72/120

Complete 100%

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbProgressImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-progress-basic',
  imports: [HbProgressImports],
  template: `
    <div class="flex w-full max-w-md flex-col gap-4">
      <hb-progress [hbValue]="30" hbLabel="Digitising" hbShowValue />
      <hb-progress
        [hbValue]="72"
        [hbMax]="120"
        hbLabel="Cataloguing"
        hbShowValue
        hbFormat="fraction"
      />
      <hb-progress [hbValue]="100" hbLabel="Complete" hbShowValue hbType="success" />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoProgressBasicComponent {}

Status, tamanho e forma

Digitised 92%

In review 58%

Errors 14%

Storage 70

Valor interno, template e indeterminado

64%

7/10

Photos 42 of 100 photos

Uploading photos

Referência de API

hb-progress — value

Propriedade	Descrição	Tipo	Padrão
[hbValue] / [hbMax]	A quantidade atual e o total contra o qual é medida. O valor é limitado a 0…max.	number	0 / 100
[hbIndeterminate]	Mostra uma barra indeterminada animada em vez de um valor fixo.	boolean	false
[hbShowValue] / [hbFormat]	Exibe o valor, formatado como percentual, o valor bruto, ou uma fração valor/max.	boolean / 'percent' \| 'value' \| 'fraction'	false / 'percent'
[hbValuePosition]	Renderiza o valor na linha superior acima da trilha, ou dentro da barra preenchida.	'outside' \| 'inside'	'outside'
[hbLabel] / [hbAriaLabel]	Um rótulo visível acima da trilha, e o rótulo acessível para a progressbar.	string	'' / 'Progress'
ng-template[hbValueTemplate]	Renderização do valor totalmente customizada. Contexto: $implicit = value, value, max, percent.	template	—

hb-progress — appearance

Propriedade	Descrição	Tipo	Padrão
[hbType]	A cor da barra.	'default' \| 'success' \| 'warning' \| 'destructive'	'default'
[hbSize]	Altura da trilha.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbShape]	Arredondamento dos cantos da trilha e da barra.	'rounded' \| 'soft' \| 'square'	'rounded'
[hbBarClass]	Classes extras aplicadas à barra preenchida (ex. um gradiente).	ClassValue	''