Avatar Group | Neural Native

Importación

component.ts

import { NeuAvatarGroupComponent } from '@neural-ui/native/avatar-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.

Conoce a tu equipo

Utiliza los avatares solapados en el resumen de un proyecto. Ver equipo muestra a las personas representadas por el grupo y su contador.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuAvatarGroupComponent } from '@neural-ui/native/avatar-group';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuBadgeComponent, NeuAvatarComponent, NeuAvatarGroupComponent, 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">Conoce a tu equipo</text><text class="product-caption">Espacio del producto</text></view>
    <view class="product-surface">
      <view class="product-row"><view class="product-copy"><text class="product-heading">Lanzamiento móvil</text><text class="product-caption">Diseño e ingeniería</text></view><neu-badge label="En curso" tone="info" /></view>
      <text class="product-caption">Cinco personas dando vida a la próxima experiencia móvil.</text>
      <neu-avatar-group [items]="members" [max]="3" size="md" moreLabel="miembros más del equipo" />
      <neu-button [label]="expanded() ? 'Ocultar equipo' : 'Ver equipo'" size="sm" variant="text" (pressed)="expanded.set(!expanded())" />
    </view>
    @if (expanded()) {
      <view class="product-section">@for (member of members; track member.id) {
        <view class="product-row"><neu-avatar [label]="member.label" size="sm" /><view class="product-copy"><text class="product-heading">{{ member.label }}</text><text class="product-caption">{{ member.role }}</text></view></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 expanded = signal(false);
  readonly members = [
    { id: 'ada', label: 'Ada Lovelace', role: 'Diseñadora de producto' },
    { id: 'grace', label: 'Grace Hopper', role: 'Responsable de ingeniería' },
    { id: 'alan', label: 'Alan Turing', role: 'Desarrollador móvil' },
    { id: 'katherine', label: 'Katherine Johnson', role: 'Ingeniera de calidad' },
    { id: 'margaret', label: 'Margaret Hamilton', role: 'Responsable de lanzamientos' },
  ];
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

AndroidCaptura nativa

iOSCaptura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
items	readonly (NeuOption & { readonly uri?: string; readonly tone?: NeuTone; })[]	[]	Input	Personas con id estable y label, uri opcional y tone opcional. El tone de una persona sustituye el del grupo solo para ese avatar; el contador utiliza el tone del grupo.
max	number	4	Input	Cantidad máxima de avatares visibles antes del contador de exceso.
moreLabel	string	'more people'	Input	Texto o nombre accesible utilizado para más elementos. No ejecuta la acción por sí solo.
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.
size	NeuSize	'md'	Input	Diámetro del avatar: sm = 32, md = 40, lg = 48 puntos; las iniciales utilizan 12, 14 y 16 puntos. Avatar utiliza lg por defecto; AvatarGroup utiliza md y añade un anillo separador de 2 puntos.

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

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

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

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

NeuSize

NeuSize.ts

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

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuSize = 'sm' | 'md' | 'lg';

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.

example-data.ts

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

type ExampleItems = readonly (NeuOption & { readonly uri?: string; readonly tone?: NeuTone; })[];