Componente

Meter Group

Barras apiladas para comparar varios valores frente a un total compartido

import { NeuMeterGroupComponent } from '@neural-ui/core/meter-group';
import type { NeuMeterItem } from '@neural-ui/core/meter-group';

Uso de disco

Sistema8.4%
Documentos23%
Multimedia40%
Libre28.6%

Distribución de tickets

Resueltos68%
En progreso22%
Pendientes10%

Sin leyenda, redondeado

Sin bordes redondeados, altura grande

Resueltos68%
En progreso22%
Pendientes10%

import { NeuMeterGroupComponent } from '@neural-ui/core/meter-group';
import { NeuMeterItem } from '@neural-ui/core/meter-group';

@Component({
  imports: [NeuMeterGroupComponent],
  template: `
    <neu-meter-group [items]="diskUsage" [total]="500" />
  `
})
export class MyComponent {
  diskUsage: NeuMeterItem[] = [
    { label: 'Sistema',     value: 42,  color: 'var(--neu-primary)' },
    { label: 'Documentos',  value: 115, color: '#10b981' },
    { label: 'Multimedia',  value: 200, color: '#f59e0b' },
    { label: 'Libre',       value: 143, color: 'var(--neu-surface-3)' },
  ];
}