Tabs

Uso

Proporciona tabs con ids estables, etiquetas y, opcionalmente, badge o disabled. Proyecta un neu-tab-panel con un tabId correspondiente por cada pestaña. activeId junto con activeIdChange permite que la aplicación controle la selección; si se omite, initialActiveId es un valor inicial y el componente gestiona la selección. null deja expresamente todos los paneles sin seleccionar. NeuTabLabel personaliza la etiqueta de la pestaña, no el panel.

Ejemplos

Prueba el comportamiento y consulta el código ejecutable en Código.

Prueba y configura

Cambia las opciones, prueba el resultado y consulta su template generado. Abre Código para ver la implementación completa.

<neu-tabs
  [tabs]="tabs()"
  [activeId]="active()"
  (activeIdChange)="active.set($event)"
  [flush]="false"
  ariaLabel="Secciones del pedido"
>
  <neu-tab-panel tabId="summary">
    <p>Revisa los datos del pedido antes de continuar.</p>
  </neu-tab-panel>
  <neu-tab-panel tabId="activity">
    <p>Hay tres actualizaciones disponibles.</p>
  </neu-tab-panel>
  <neu-tab-panel tabId="archive">
    <p>Contenido archivado</p>
  </neu-tab-panel>
</neu-tabs>

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

export const tabs = signal([
  {
    "id": "summary",
    "label": "Resumen"
  },
  {
    "id": "activity",
    "label": "Actividad",
    "badge": "3"
  },
  {
    "id": "archive",
    "label": "Archivo",
    "disabled": true
  }
]);

export const active = signal("summary");

Datos y contenido

activeIdChange propone una clave de pestaña o null. En modo controlado, actualiza activeId para aceptar la propuesta. No cambies entre el modo controlado y el no controlado en la misma instancia.

Accesibilidad y teclado

Las flechas izquierda/derecha, Inicio y Fin mueven el foco entre las pestañas habilitadas. Intro o Espacio activa la pestaña enfocada; mover el foco no cambia la selección. Proporciona un ariaLabel significativo. Las barras estrechas permiten desplazamiento horizontal.

API

Los Inputs y Outputs corresponden al paquete Core fijado. Los tipos con nombre enlazan a sus definiciones. Templates incluye ejemplos ejecutables de cada zona disponible.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

import type { NeuTab } from '@neural-ui/core/tabs';
import type { NeuTabKey } from '@neural-ui/core/tabs';

import { NeuTabLabelDirective } from '@neural-ui/core/tabs';

// Declaración pública (solo referencia)
export declare class NeuTabLabelDirective<T extends NeuTab<NeuTabKey> = NeuTab<NeuTabKey>> {
}

import type { NeuTabLabelContext } from '@neural-ui/core/tabs';

import { NeuTabLabelDirective } from '@neural-ui/core/tabs';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuTabLabelContext<T>>;

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuTabKey } from '@neural-ui/core/tabs';

import type { NeuTab } from '@neural-ui/core/tabs';

// Declaración pública (solo referencia)
interface NeuTab<K extends NeuTabKey = string> {
  readonly badge?: string;
  readonly disabled?: boolean;
  readonly id: K;
  readonly label: string;
}

import type { NeuTabKey } from '@neural-ui/core/tabs';

// Declaración pública (solo referencia)
type NeuTabKey = string | number;

import type { NeuTab } from '@neural-ui/core/tabs';
import type { NeuTabKey } from '@neural-ui/core/tabs';

import type { NeuTabLabelContext } from '@neural-ui/core/tabs';

// Declaración pública (solo referencia)
interface NeuTabLabelContext<T extends NeuTab<NeuTabKey> = NeuTab<NeuTabKey>> {
  readonly $implicit: T;
  readonly active: boolean;
}

Estilos y tokens

Utiliza los tokens públicos de superficie, texto, espaciado y foco. Comprueba el contenido en ambos temas y con anchos reducidos.

Componentes relacionados

Combina estos componentes para construir la interfaz del entorno.

• TabPanel
• Accordion