Meter Group | Neural Native

Import

component.ts

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

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Room for your next idea

Read storage categories against a shared quota, add local sample usage and restore it. Category totals, free space and the meter remain consistent.

View and copy the complete example

basic.component.ts

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">Room for your next idea</text><text class="product-caption">Understand what fills your workspace</text></view>
    <view class="product-surface"><view class="product-row"><view class="product-copy"><text class="product-heading">Workspace storage</text><text class="product-caption">100 GB shared with your team</text></view><neu-badge [label]="used() + ' GB'" tone="info" /></view>
    <neu-meter-group label="Storage usage" [items]="storage()" [max]="100" /><text class="product-caption">{{ 100 - used() }} GB available</text>
    <view class="product-actions"><neu-button label="Add sample documents" size="sm" variant="outline" [disabled]="used() > 90" (pressed)="documents.update(add)" /><neu-button label="Reset storage" 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: 'Photos', value: 42 }, { id: 'documents', label: 'Documents', value: this.documents() }, { id: 'other', label: 'Other', value: 10 }]);
  readonly used = computed(() => this.storage().reduce((sum, item) => sum + item.value, 0));
}

Changing usage

Change document storage to update the distribution immediately.

View and copy the complete example

changing-usage.component.ts

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 label="New document storage" [(value)]="documentStorage" [min]="0" [max]="30" [step]="5" />
    <neu-meter-group label="Updated storage usage" [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: 'Photos', value: 42 },
    { id: 'documents', label: 'Documents', value: 18 },
    { id: 'other', label: 'Other', value: 10 },
  ];
  readonly documentStorage = signal(10);
  readonly updatedStorage = computed(() => [
    { id: 'photos', label: 'Photos', value: 42 },
    { id: 'documents', label: 'Documents', value: this.documentStorage() },
    { id: 'other', label: 'Other', value: 10 },
  ]);
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Meter Group · android · native capture — **Android**Native screenshot

Meter Group · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	'Distribution'	Input	Human-readable name for the control, action or group.
items	readonly (NeuOption & { readonly value: number; })[]	[]	Input	Ordered data for the component. Use the data contract below and stable, unique item IDs.
max	number \| undefined	undefined	Input	Total scale for the displayed values. MeterGroup uses the sum of item values when max is undefined.
tone	NeuTone	'brand'	Input	Semantic color: neutral, brand, success, info, warning or danger. The accent value remains a compatible alias for brand. Colors use NeuTheme tokens; explain statuses with words as well as color.

Models

This component declares no two-way models.

Outputs

This component declares no public outputs.

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuOption

NeuOption.ts

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;
}

Field	Type	Requirement	Meaning
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.

NeuTone

NeuTone.ts

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';

Inline shape of items

This property extends a shared type inline; it is not a separately named export. The following application-side alias shows the complete accepted shape.

example-data.ts

import type { NeuOption } from '@neural-ui/native';

type ExampleItems = readonly (NeuOption & { readonly value: number; })[];