Tabs | Neural Native

Importación

component.ts

import { NeuTabsComponent } from '@neural-ui/native/tabs';

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.

La mesa de lanzamiento

Alterna entre el resumen del lanzamiento y la actividad del equipo. Completar la revisión actualiza el progreso y el estado de la cabecera; la selección se conserva al cambiar de pestaña.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuCheckboxComponent } from '@neural-ui/native/checkbox';
import { NeuDividerComponent } from '@neural-ui/native/divider';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuProgressBarComponent } from '@neural-ui/native/progress-bar';
import { NeuTabsComponent } from '@neural-ui/native/tabs';
import { View, Text, ScrollView } from '@ng-native/components';
import { NeuTabPanelComponent } from '@neural-ui/native/tabs';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuCheckboxComponent, NeuDividerComponent, NeuAvatarComponent, NeuProgressBarComponent, NeuTabsComponent, NeuTabPanelComponent, 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">La mesa de lanzamiento</text><text class="product-caption">Todo sobre este hito, en un lugar</text></view>
    <view class="release-banner"><text class="release-kicker">NEURAL STUDIO / LANZAMIENTO 02</text><text class="release-title">Una bienvenida cuidada.</text><view class="product-row"><view class="product-copy"><text class="release-date">Lanzamiento móvil · Viernes</text></view><view class="release-stage"><text class="release-stage-text">{{ done() ? 'Listo' : 'En revisión' }}</text></view></view></view>
    <neu-tabs label="Detalles del proyecto" [tabs]="tabs" [(value)]="selectedTab"><neu-tab-panel id="overview"><view class="release-overview"><neu-progress-bar label="Preparación del lanzamiento" [value]="done() ? 100 : 72" /><text class="product-heading">Una primera impresión acogedora</text><text class="product-caption">Prepara la bienvenida y las notas finales del lanzamiento.</text><view class="release-review"><neu-checkbox label="Revisión final completada" [(checked)]="done" /><text class="product-caption">{{ done() ? 'Todo listo para el próximo hito.' : 'Una última revisión antes de la entrega.' }}</text></view></view></neu-tab-panel>
    <neu-tab-panel id="activity"><view class="product-section"><view class="product-row"><neu-avatar label="Grace Hopper" size="sm" /><view class="product-copy"><text class="product-heading">Grace Hopper</text><text class="product-caption">Ha actualizado las notas · Hoy</text></view></view><neu-divider /><view class="product-row"><neu-avatar label="Ada Lovelace" size="sm" /><view class="product-copy"><text class="product-heading">Ada Lovelace</text><text class="product-caption">Ha revisado la bienvenida · Ayer</text></view></view></view></neu-tab-panel></neu-tabs></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); }
.release-banner { gap: 16px; padding: 22px; border-radius: 20px; background-color: #e7edff; }
.release-kicker { color: #3a5693; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 1px; }
.release-title { color: #173f82; font-size: 30px; line-height: 36px; font-weight: 600; }
.release-date { color: #425d8c; font-size: 13px; line-height: 19px; }
.release-stage { padding: 6px 10px; border-radius: 20px; background-color: #ffffff; }
.release-stage-text { color: #234e94; font-size: 11px; line-height: 16px; font-weight: 600; }
.release-overview { gap: 16px; padding-top: 8px; }
.release-review { gap: 8px; padding: 16px; border-radius: 14px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
  `,
})
export class ExampleComponent {
  readonly tabs: readonly NeuOption[] = [
    {
      "id": "overview",
      "label": "Resumen"
    },
    {
      "id": "activity",
      "label": "Actividad"
    }
  ];
  readonly selectedTab = signal('overview');
  readonly done = signal(false);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

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

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

Personalización

Contenido proyectado

Proyecta hijos neu-tab-panel con IDs que coincidan con los datos de tabs. Cada panel activo muestra su contenido proyectado. Importa NeuTabPanelComponent desde @neural-ui/native/tabs junto con NeuTabsComponent.

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
label	string	'Tabs'	Input	Nombre legible del control, acción o grupo.
tabs	readonly NeuOption[]	[]	Input	Definiciones de pestañas con IDs estables, etiquetas y estado disabled opcional.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
value	string	''	Model · bidireccional	Valor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)].

Outputs

Nombre	Payload	Cuándo se emite
valueChange	string	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly value = signal<string>('');

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.

Componente complementario: NeuTabPanelComponent

companion-import.ts

import { NeuTabPanelComponent } from '@neural-ui/native/tabs';

Importa el complemento junto con el componente padre y añade ambos a Component.imports. El ejemplo anterior muestra su relación.

Nombre	Tipo	Predeterminado	Enlace	Descripción
id	string	Obligatorio	Input	ID obligatorio del panel. Debe coincidir con el id de un elemento habilitado del array tabs del Tabs que lo contiene.