Pular para o conteúdo Herbst UI beta

Componente

Meter group

Um medidor segmentado que divide um total em partes rotuladas e coloridas. Passe um array de itens, escale-os contra um intervalo min/max, disponha-os horizontal ou verticalmente, e sobrescreva os rótulos, medidores, ícones ou conteúdo ao redor com templates.

Divisão segmentada

  1. Photos42%
  2. Videos28%
  3. Notes14%
  4. Free16%
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbMeterGroupImports, type HbMeterItem } from '@herbst/ui';

@Component({
  selector: 'hb-demo-meter-group-basic',
  imports: [HbMeterGroupImports],
  template: ` <hb-meter-group class="w-full max-w-md" [hbValue]="items" /> `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoMeterGroupBasicComponent {
  protected readonly items: HbMeterItem[] = [
    { label: 'Photos', value: 42, color: '#6B7A55' },
    { label: 'Videos', value: 28, color: '#A64B2A' },
    { label: 'Notes', value: 14, color: '#B98A3E' },
    { label: 'Free', value: 16, color: '#3E4C3A' },
  ];
}

Vertical, ícones e posição do rótulo

  1. Oak38%
  2. Beech30%
  3. Maple18%

Medidor e rodapé customizados

  1. Oak37%
  2. Beech27%
  3. Maple15%

3 categories · 78% of quota used

Referência de API

hb-meter-group

PropriedadeDescriçãoTipoPadrão
[hbValue] Os segmentos. Cada item é { label, value, color?, icon? }. HbMeterItem[] []
[hbMin] / [hbMax] O intervalo de valores contra o qual cada segmento é medido; um segmento preenche (value / (max − min)) da trilha. number 0 / 100
[hbOrientation] Dispõe a trilha como uma barra horizontal ou uma coluna vertical. 'horizontal' | 'vertical' 'horizontal'
[hbLabelPosition] Se a lista de rótulos fica antes ou depois da trilha. 'start' | 'end' 'end'
[hbLabelOrientation] Dispõe os rótulos numa linha que quebra ou numa coluna empilhada. 'horizontal' | 'vertical' 'horizontal'

Template slots

PropriedadeDescriçãoTipoPadrão
ng-template[hbMeterGroupMeter] Substitui cada segmento do medidor. Contexto: $implicit = item, index, orientation, size (percentual), totalPercent. template —
ng-template[hbMeterGroupLabel] Substitui a lista de rótulos inteira. Contexto: $implicit = items, totalPercent, percentages. template —
ng-template[hbMeterGroupIcon] Substitui o ícone por rótulo. Contexto: $implicit = item, icon. template —
ng-template[hbMeterGroupStart] / [hbMeterGroupEnd] Insere conteúdo customizado antes ou depois do grupo inteiro (totais, legendas). Contexto = o contexto do rótulo. template —