Card | Neural Native

Importación

component.ts

import { NeuCardComponent } from '@neural-ui/native/card';

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.

Tu próximo hito

Compón una tarjeta con portada original, equipo y tareas interactivas. Abre el proyecto y completa sus dos tareas: el progreso refleja las tareas terminadas y se conserva localmente al cerrar el detalle.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCheckboxComponent } from '@neural-ui/native/checkbox';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuAvatarGroupComponent } from '@neural-ui/native/avatar-group';
import { NeuProgressBarComponent } from '@neural-ui/native/progress-bar';
import { NeuCardHeaderDirective } from '@neural-ui/native/card';
import { NeuCardFooterDirective } from '@neural-ui/native/card';
import { View, Text, Image, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCheckboxComponent, NeuCardComponent, NeuBadgeComponent, NeuAvatarGroupComponent, NeuProgressBarComponent, NeuCardHeaderDirective, NeuCardFooterDirective, View, Text, Image, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Tu próximo hito</text><text class="product-caption">Neural Studio · Proyecto destacado</text></view>
    <neu-card variant="outlined">
      <view neuCardHeader class="project-cover-heading">
        <view class="product-row"><view class="product-copy"><text class="studio-kicker">NEURAL STUDIO / 02</text></view><neu-badge label="En curso" tone="info" /></view>
        <image class="project-cover" [source]="{ uri: cover }" resizeMode="cover" accessibilityLabel="Ilustración original de una costa azul tranquila" />
        <text class="project-name" accessibilityRole="header">Lanzamiento móvil</text>
        <text class="product-caption">Próximo hito · Viernes</text>
      </view>
      <view class="product-section">
        <text>Prepara la bienvenida y las notas finales del lanzamiento.</text>
        <view class="product-row"><neu-avatar-group [items]="team" [max]="3" size="sm" /><view class="product-copy"><text class="product-caption">Equipo de producto</text></view></view>
        <neu-progress-bar label="Preparación del lanzamiento" [value]="readyCount() * 50" />
        @if (opened()) {
          <view class="project-checklist"><text class="product-heading">Comprobaciones del lanzamiento</text><neu-checkbox label="Revisar la bienvenida" [(checked)]="onboarding" /><neu-checkbox label="Preparar las notas del lanzamiento" [(checked)]="notes" /><text class="product-caption" accessibilityLiveRegion="polite">{{ readyCount() }} / 2 listas</text></view>
        }
      </view>
      <view neuCardFooter class="product-actions"><neu-button [label]="opened() ? 'Cerrar proyecto' : 'Abrir proyecto'" size="sm" [variant]="opened() ? 'outline' : 'solid'" (pressed)="opened.set(!opened())" /></view>
    </neu-card>
    <view class="next-project"><view class="next-project-mark"><text class="next-project-letter">N</text></view><view class="product-copy"><text class="studio-kicker">A CONTINUACIÓN</text><text class="product-heading">Sistema de diseño</text></view><neu-badge label="Borrador" tone="neutral" /></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); }
.project-cover-heading { gap: 12px; }
.studio-kicker { color: var(--neu-muted, #596477); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 1px; }
.project-cover { width: 100%; aspect-ratio: 2; border-radius: 12px; }
.project-name { color: var(--neu-text, #172033); font-size: 25px; line-height: 31px; font-weight: 600; }
.project-checklist { gap: 12px; padding-top: 8px; }
.next-project { flex-direction: row; align-items: center; gap: 12px; }
.next-project-mark { width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background-color: #e9e1f6; }
.next-project-letter { font-size: 20px; font-weight: 600; color: #5b387d; }
  `,
})
export class ExampleComponent {
  readonly cover = '/assets/media/v2/coast.png';
  readonly team = [{ id: 'ada', label: 'Ada Lovelace' }, { id: 'grace', label: 'Grace Hopper' }, { id: 'alan', label: 'Alan Turing' }];
  readonly opened = signal(false);
  readonly onboarding = signal(true);
  readonly notes = signal(false);
  readonly readyCount = computed(() => Number(this.onboarding()) + Number(this.notes()));
}

Acabados surface y tonal

Compara tarjetas surface y tonal con contenido proyectado.

Ver y copiar el ejemplo completo

surface-and-tonal-treatments.component.ts

import { Component } from '@angular/core';
import { NeuCardComponent } from '@neural-ui/native/card';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuCardComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-card title="Revisión de diseño" description="Hoy · 14:30" variant="surface"><text>Revisa la bienvenida final con el equipo.</text></neu-card>
    <neu-card title="Próximo hito" description="Candidato al lanzamiento" variant="tonal"><text>Todo lo necesario para la próxima entrega.</text></neu-card>
    </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 {

}

Cabecera y acciones propias

Proyecta una cabecera con avatar y un pie independiente. La aplicación controla el contenido y la acción.

Ver y copiar el ejemplo completo

projected-regions.component.ts

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

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuBadgeComponent, NeuAvatarComponent, NeuCardHeaderDirective, NeuCardFooterDirective, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-card title="Revisión de diseño" variant="outlined">
      <view neuCardHeader class="project-header">
        <neu-avatar label="Alex Morgan" size="md" />
        <view class="project-copy"><text class="usage-heading" accessibilityRole="header">Revisión de diseño</text><text class="usage-caption">Alex Morgan · Equipo de producto</text></view>
      </view>
      <text>Revisa las pantallas de bienvenida antes del viernes.</text>
      <view neuCardFooter class="project-actions"><neu-badge label="Listo para revisión" tone="success" /><neu-button label="Abrir revisión" size="sm" variant="text" (pressed)="opened.set(true)" /></view>
    </neu-card>
    <text class="usage-caption" accessibilityLiveRegion="polite">{{ opened() ? 'Revisión abierta' : 'Elige una revisión' }}</text>
    </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; }

.project-header { flex-direction: row; gap: 12px; align-items: center; } .project-copy { flex: 1; min-width: 0; gap: 4px; } .project-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
  `,
})
export class ExampleComponent {
  readonly opened = signal(false);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Card · android · native capture — **Android**Captura nativa

Card · ios · native capture — **iOS**Captura nativa

Personalización

Importa estas directivas junto con el componente y añádelas a Component.imports. Los ejemplos anteriores incluyen la configuración completa.

personalization-imports.ts

import { NeuCardHeaderDirective, NeuCardFooterDirective } from '@neural-ui/native/card';

Plantilla o región	Contexto	Uso
`[neuCardHeader]`	`—`	Proyecta una view nativa que sustituya el título y la descripción predeterminados.
`ng-content`	`—`	El contenido sin marcador forma el cuerpo de la tarjeta.
`[neuCardFooter]`	`—`	Proyecta acciones o contenido de apoyo después del cuerpo.

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
title	string	''	Input	Encabezado de la superficie, sección o presentación.
description	string	''	Input	Texto de apoyo. Cada componente determina dónde muestra esta descripción opcional.
variant	"tonal" \| "surface" \| "outlined"	'surface'	Input	Tratamiento de superficie: surface, tonal u outlined. El contenido proyectado conserva su comportamiento.

Models

Este componente no declara models bidireccionales.

Outputs

Este componente no declara outputs públicos.