Saltar al contenido principal
Neural Nativev0.1.0-beta.1Documentación

Datos y multimedia

Avatar

Representa a una persona con un identificador visual compacto.

Angular NativeiOS / Android0.1.0-beta.1

Importación

component.ts
import { NeuAvatarComponent } from '@neural-ui/native/avatar';

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.

Iniciales del equipo

Compón un directorio con un retrato colectivo y una lista legible. Las iniciales grandes, medianas y pequeñas mantienen las proporciones de Avatar; nombres, funciones y disponibilidad escrita aportan contexto sin depender del color.

Ver y copiar el ejemplo completo
team-initials.component.ts
import { Component } from '@angular/core';
import { NeuDividerComponent } from '@neural-ui/native/divider';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuDividerComponent, NeuAvatarComponent, 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">Las personas detrás del trabajo</text><text class="product-caption">Un equipo reconocible, incluso sin fotos</text></view>
    <view class="studio-team-cover"><view class="product-row"><view class="product-copy"><text class="team-kicker">NEURAL / PERSONAS</text></view><text class="team-edition">Estudio 03</text></view>
    <text class="team-title">Mejor, en equipo.</text><text class="team-description">Tres miradas. Un lanzamiento cuidado.</text>
    <view class="team-cover-footer"><view class="team-avatar-pill"><neu-avatar label="Ada Lovelace" size="lg" /><neu-avatar label="Grace Hopper" size="md" tone="success" /><neu-avatar label="Alan Turing" size="sm" tone="neutral" /></view><text class="team-cover-note">Colectivo de producto</text></view></view>
    <view class="team-roster"><text class="team-section-label">TUS COLABORADORES</text>
    <view class="product-row"><neu-avatar label="Ada Lovelace" size="lg" /><view class="product-copy"><text class="product-heading">Ada Lovelace</text><text class="product-caption">Responsable del espacio</text></view></view>
    <neu-divider /><view class="product-row"><neu-avatar label="Grace Hopper" size="md" tone="success" /><view class="product-copy"><text class="product-heading">Grace Hopper</text><text class="product-caption">Ingeniería · Disponible</text></view></view>
    <neu-divider /><view class="product-row"><neu-avatar label="Alan Turing" size="sm" tone="neutral" /><view class="product-copy"><text class="product-heading">Alan Turing</text><text class="product-caption">Investigación · Ausente</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); }
.studio-team-cover { gap: 16px; padding: 22px; border-radius: 20px; background-color: #132e57; }
.team-kicker { color: #b9d6ff; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 1px; }
.team-edition { color: #d4e2f7; font-size: 12px; }
.team-title { color: #ffffff; font-size: 31px; line-height: 36px; font-weight: 600; }
.team-description { color: #d4e2f7; font-size: 15px; line-height: 22px; }
.team-cover-footer { gap: 12px; padding-top: 8px; }
.team-avatar-pill { flex-direction: row; align-items: center; gap: 10px; align-self: flex-start; padding: 10px; border-radius: 40px; background-color: #e9f1ff; --neu-surface: #e9f1ff; --neu-text: #132e57; }
.team-cover-note { color: #d4e2f7; font-size: 12px; line-height: 18px; }
.team-roster { gap: 16px; padding: 4px 2px; }
.team-section-label { color: var(--neu-muted, #596477); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 1px; }
  `,
})
export class ExampleComponent {

}

Colores semánticos

Compara los seis colores semánticos que proporciona el tema.

Ver y copiar el ejemplo completo
semantic-colors.component.ts
import { Component } from '@angular/core';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuAvatarComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <view class="usage-row"><neu-avatar label="Alex Morgan" tone="brand" size="md" />
    <neu-avatar label="Sam Rivera" tone="neutral" size="md" />
    <neu-avatar label="Casey Lee" tone="success" size="md" />
    <neu-avatar label="Robin Bell" tone="info" size="md" />
    <neu-avatar label="Jamie Fox" tone="warning" size="md" />
    <neu-avatar label="Taylor Reed" tone="danger" size="md" /></view>
    </view>
    </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 {

}
Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Avatar · android · native capture
AndroidCaptura nativa
Avatar · ios · native capture
iOSCaptura nativa

Referencia API

Inputs

NombreTipoPredeterminadoEnlaceDescripción
labelstringObligatorioInputNombre legible del control, acción o grupo.
uristring''InputURI de la imagen o recurso que se muestra; utiliza un origen admitido por la plataforma nativa.
toneNeuTone'brand'InputColor 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.
sizeNeuSize'lg'InputDiá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.

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