MeterGroup

Uso

Cada NeuMeterItem proporciona label, value y un color CSS opcional. Un total positivo define la capacidad; total 0 utiliza la suma de los elementos. Si total es mayor, la parte libre de la barra representa la capacidad disponible. Los valores negativos y no finitos cuentan como 0; el exceso se limita en el orden de los elementos. showLegend añade nombres y porcentajes. Es un medidor de distribución, no de progreso de una operación.

Ejemplos

Prueba la interacción y abre Código para ver la implementación. Reiniciar restablece el estado inicial.

Prueba y configura

Cambia las opciones y consulta la vista previa y el template generado. Código contiene el ejemplo ejecutable completo.

<neu-meter-group
  [items]="items"
  [total]="100"
  [height]="12"
  [rounded]="true"
  [showLegend]="true"
  ariaLabel="Distribución del almacenamiento"
/>

export const items = [
  {
    "label": "Documentos",
    "value": 35
  },
  {
    "label": "Fotos",
    "value": 25
  }
];

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

const items: NeuMeterItem[] = [
  {
    "label": "Documentos",
    "value": 35
  },
  {
    "label": "Fotos",
    "value": 25
  }
];

Datos y contenido

La aplicación proporciona items y total. MeterGroup calcula la distribución mostrada sin modificar el array recibido. No tiene Outputs ni templates.

Accesibilidad y teclado

Proporciona un ariaLabel descriptivo y conserva la leyenda para explicar cada segmento sin depender del color. El medidor expone el total y el valor utilizado normalizados. Incluye las unidades y la capacidad restante en texto contiguo. No tiene interacción de teclado.

API

Los Inputs y Outputs se extraen del paquete fijado. Los tipos con nombre enlazan a sus definiciones; Templates enumera solo las zonas de proyección disponibles.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

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

// Declaración pública (solo referencia)
export interface NeuMeterItem {
  color?: string;
  label: string;
  value: number;
}

Estilos y tokens

Utiliza los Inputs públicos y los tokens de superficie, texto, espaciado y color semántico de Core. Mantén el contenido adaptable y comprueba ambos temas.

Componentes relacionados

Consulta los componentes relacionados para componer la interfaz del entorno.

• Card
• ProgressBar