Empty State | Neural Native

Importación

component.ts

import { NeuEmptyStateComponent } from '@neural-ui/native/empty-state';

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.

Projects

Crea el primer proyecto para sustituir el estado vacío por contenido. Empezar de nuevo recupera la pantalla inicial.

Ver y copiar el ejemplo completo

basic.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 { NeuEmptyStateComponent } from '@neural-ui/native/empty-state';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuBadgeComponent, NeuEmptyStateComponent, 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">Proyectos</text><text class="product-caption">Haz sitio a tu próxima idea</text></view>
    @if (!created()) {
      <view class="product-surface"><neu-empty-state title="Todavía no hay proyectos" description="Crea tu primer proyecto para empezar." actionLabel="Crear proyecto" (action)="created.set(true)" /></view>
    } @else {
      <neu-card title="Lanzamiento móvil" description="Tu nuevo espacio está listo" variant="outlined"><view class="product-section"><neu-badge label="Borrador" tone="neutral" /><text>Invita a tu equipo y planifica el primer hito.</text><neu-button label="Empezar de nuevo" size="sm" variant="text" (pressed)="created.set(false)" /></view></neu-card>
    }</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 created = signal(false);
}

Crear un proyecto

Crea un proyecto para mostrar el siguiente estado y después reinícialo.

Ver y copiar el ejemplo completo

after-creating-a-project.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuEmptyStateComponent } from '@neural-ui/native/empty-state';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuEmptyStateComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    @if (!requested()) {
    <neu-empty-state title="Todavía no hay proyectos" description="Crea tu primer proyecto para empezar." actionLabel="Crear proyecto" (action)="requested.set(true)" />
    } @else { <neu-card title="Nuevo proyecto" description="Espacio en borrador" variant="outlined"><text>Tu nuevo espacio está listo para configurar.</text></neu-card><neu-button label="Restablecer ejemplo" size="sm" variant="text" (pressed)="requested.set(false)" /> }
    </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 requested = signal(false);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Empty State · android · native capture — **Android**Captura nativa

Empty State · ios · native capture — **iOS**Captura nativa

Personalización

Contenido proyectado

Después de la descripción y antes del botón opcional actionLabel. Añade una ilustración o acción propia; deja actionLabel vacío si aportas tú esa acción.

Utiliza elementos nativos de @ng-native/components y controles públicos de Neural Native. Los estilos Angular pertenecen al componente que declara este contenido.

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
title	string	Obligatorio	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.
actionLabel	string	''	Input	Texto o nombre accesible utilizado para acción principal. No ejecuta la acción por sí solo.

Models

Este componente no declara models bidireccionales.

Outputs

Nombre	Payload	Cuándo se emite
action	void	Solicita la acción del componente. El payload, si existe, identifica la acción o elemento.