Estados y avisos
Meter Group
Compara medidas relacionadas en un grupo visual compacto.
Importación
import { NeuMeterGroupComponent } from '@neural-ui/native/meter-group';Ejemplos
Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.
Espacio para tu próxima idea
Consulta las categorías respecto a una cuota, añade consumo local de ejemplo y restablécelo. El total, el espacio libre y el medidor se mantienen coherentes.
Ver y copiar el ejemplo completo
import { Component, signal, computed } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuMeterGroupComponent } from '@neural-ui/native/meter-group';
import { View, Text, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuButtonComponent, NeuBadgeComponent, NeuMeterGroupComponent, View, Text, ScrollView],
template: `
<scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Espacio para tu próxima idea</text><text class="product-caption">Entiende qué ocupa tu espacio</text></view>
<view class="product-surface"><view class="product-row"><view class="product-copy"><text class="product-heading">Almacenamiento del espacio</text><text class="product-caption">100 GB compartidos con tu equipo</text></view><neu-badge [label]="used() + ' GB'" tone="info" /></view>
<neu-meter-group label="Uso del almacenamiento" [items]="storage()" [max]="100" /><text class="product-caption">{{ 100 - used() }} GB disponibles</text>
<view class="product-actions"><neu-button label="Añadir documentos de ejemplo" size="sm" variant="outline" [disabled]="used() > 90" (pressed)="documents.update(add)" /><neu-button label="Restablecer almacenamiento" size="sm" variant="text" (pressed)="documents.set(18)" /></view></view></view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
`,
})
export class ExampleComponent {
readonly documents = signal(18);
readonly add = (value: number) => value + 10;
readonly storage = computed(() => [{ id: 'photos', label: 'Fotos', value: 42 }, { id: 'documents', label: 'Documentos', value: this.documents() }, { id: 'other', label: 'Otros', value: 10 }]);
readonly used = computed(() => this.storage().reduce((sum, item) => sum + item.value, 0));
}Distribución editable
Cambia el almacenamiento de documentos para actualizar la distribución.
Ver y copiar el ejemplo completo
import { Component, signal, computed } from '@angular/core';
import { NeuMeterGroupComponent } from '@neural-ui/native/meter-group';
import { NeuNumberInputComponent } from '@neural-ui/native/number-input';
import { View, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';
@Component({
selector: 'app-example',
imports: [NeuMeterGroupComponent, NeuNumberInputComponent, View, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<neu-number-input increaseLabel="Aumentar" decreaseLabel="Disminuir" label="Almacenamiento de documentos nuevos" [(value)]="documentStorage" [min]="0" [max]="30" [step]="5" />
<neu-meter-group label="Uso actualizado del almacenamiento" [items]="updatedStorage()" [max]="100" tone="info" />
</view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
`,
})
export class ExampleComponent {
readonly storage: readonly (NeuOption & { readonly value: number })[] = [
{ id: 'photos', label: 'Fotos', value: 42 },
{ id: 'documents', label: 'Documentos', value: 18 },
{ id: 'other', label: 'Otros', value: 10 },
];
readonly documentStorage = signal(10);
readonly updatedStorage = computed(() => [
{ id: 'photos', label: 'Fotos', value: 42 },
{ id: 'documents', label: 'Documentos', value: this.documentStorage() },
{ id: 'other', label: 'Otros', value: 10 },
]);
}Playground interactivo
Ajusta la configuración y prueba el resultado.
Capturas del dispositivo en inglés.
Referencia API
Inputs
| Nombre | Tipo | Predeterminado | Enlace | Descripción |
|---|---|---|---|---|
| label | string | 'Distribution' | Input | Nombre legible del control, acción o grupo. |
| items | readonly (NeuOption & { readonly value: number; })[] | [] | Input | Datos ordenados del componente. Utiliza el contrato siguiente e identificadores estables y únicos. |
| max | number | undefined | undefined | Input | Escala total de los valores. MeterGroup utiliza la suma de los valores cuando max es undefined. |
| tone | NeuTone | 'brand' | Input | Color semántico: neutral, brand, success, info, warning o danger. El valor accent se conserva como alias compatible de brand. Utiliza los tokens de NeuTheme; explica los estados con palabras además del color. |
Models
Este componente no declara models bidireccionales.
Outputs
Este componente no declara outputs públicos.
Tipos e interfaces de datos
Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.
NeuOption
import type { NeuOption } from '@neural-ui/native';
// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
readonly id: string;
readonly label: string;
readonly description?: string;
readonly disabled?: boolean;
}| Campo | Tipo | Requisito | Significado |
|---|---|---|---|
| id | string | Obligatorio | Identificador estable y único para seguimiento y selección. |
| label | string | Obligatorio | Nombre legible del elemento. |
| description | string | Opcional | Texto de apoyo opcional; su presentación depende del control. |
| disabled | boolean | Opcional | Impide activar o seleccionar este elemento. |
NeuTone
import type { NeuTone } from '@neural-ui/native/foundation';
// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';Estructura específica de items
Esta propiedad amplía un tipo compartido de forma inline; no es una exportación con nombre independiente. El siguiente alias de tu aplicación muestra la estructura admitida completa.
import type { NeuOption } from '@neural-ui/native';
type ExampleItems = readonly (NeuOption & { readonly value: number; })[];