Coloca TabPanel dentro de Tabs y asigna a su tabId obligatorio el id del elemento correspondiente. Su contenido proyectado se muestra solo mientras la pestaña está activa. No es un contenedor independiente de visibilidad. Usa Tabs para activeId, los Templates de etiqueta y los eventos de selección.
Cambia las opciones, prueba el resultado y consulta su template generado. Abre Código para ver la implementación completa.
Prueba y configura
Resumen del pedido
template.html
<neu-tabs
[tabs]="tabs()"
[activeId]="active()"
(activeIdChange)="active.set($event)"
ariaLabel="Secciones del pedido"
>
<neu-tab-panel tabId="summary">
<p>Resumen del pedido</p>
</neu-tab-panel>
<neu-tab-panel tabId="activity">
<p>Cada panel pertenece a un ID de pestaña.</p>
</neu-tab-panel>
<neu-tab-panel tabId="archive">
<p>—</p>
</neu-tab-panel>
</neu-tabs>
Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.
tabId · K
En Código: define tabId con este tipo y utiliza [tabId]="tabId" (o tabId() si es una signal).
El padre vincula la pestaña seleccionada con su panel mediante IDs generados. Incluye un panel para cada pestaña, también las deshabilitadas. Coloca los controles y acciones en el panel, no dentro del botón de pestaña.
Tecla
Acción
Tab
Sigue el orden normal de foco de enlaces, campos y acciones del contenido; el contenedor no añade un modelo de foco móvil.
Enter
Activa un botón nativo enfocado o sigue un enlace enfocado dentro del contenido.
Space
Activa un botón nativo enfocado dentro del contenido; los campos mantienen la edición normal de texto.
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.
Nombre
Tipo
Por defecto
Uso en el template
Descripción
tabId
K
Obligatorio
[tabId]
Clave obligatoria correspondiente a un elemento del padre Tabs.
Templates
ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.
Utiliza los tokens públicos de superficie, texto, espaciado y foco. Comprueba el contenido en ambos temas y con anchos reducidos.
Tokens específicos
Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.
Tokens compartidos utilizados
Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.
