Panel

Agrupa contenido bajo una cabecera con plegado opcional.

Categoría: Diseño y contenido
Import: @neural-ui/core/panel
Selector: neu-panel

import { NeuPanelComponent } from '@neural-ui/core/panel';

Uso

Asigna header y proyecta el cuerpo. Activa collapsible para mostrar la acción de cabecera y traduce expandLabel y collapseLabel. Enlaza collapsed para controlar el estado o déjalo sin enlazar y utiliza initialCollapsed como valor inicial. Un panel plegable mantiene su acción disponible aunque no tenga título.

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.

La entrega está incluida en este pedido.

Cabecera

Etiqueta de expansión

Etiqueta de cierre

Plegable

Plegado

Opciones avanzadas · 1

<neu-panel
  header="Datos del pedido"
  [collapsible]="true"
  [collapsed]="collapsed()"
  (collapsedChange)="collapsed.set($event)"
  expandLabel="Expandir"
  collapseLabel="Plegar"
>
  <p>La entrega está incluida en este pedido.</p>
</neu-panel>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

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

export const collapsed = signal(false);

Datos y contenido

collapsedChange propone el siguiente estado booleano. Acéptalo actualizando collapsed en modo controlado. El valor inicial se aplica una sola vez, no con cada cambio. Las acciones proyectadas pertenecen a la aplicación.

Accesibilidad y teclado

El botón nativo de cabecera admite Tab, Intro y Espacio. Anuncia el estado expandido. Utiliza una cabecera descriptiva y etiquetas de expansión y plegado comprensibles en el idioma actual.

Tecla	Acción
`Tab`	Accede al botón habilitado de contraer y al contenido enfocable.
`Enter`	En el botón de contraer, expande o contrae el contenido cuando está disponible.
`Space`	En el botón de contraer, expande o contrae el contenido cuando está disponible.

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.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`collapsed`	`boolean \| undefined`	`undefined`	`[collapsed]`	Estado de plegado aplicado; undefined habilita el modo no controlado una vez.
`collapseLabel`	`string`	`'Collapse'`	`[collapseLabel]`	Texto visible del botón de plegado.
`collapsible`	`boolean`	`false`	`[collapsible]`	Muestra la acción de plegado cuando hay cabecera.
`expandLabel`	`string`	`'Expand'`	`[expandLabel]`	Texto visible del botón de expansión.
`header`	`string`	`''`	`[header]`	Cabecera visible del panel.
`initialCollapsed`	`boolean`	`false`	`[initialCollapsed]`	Estado inicial, aplicado una sola vez si se omite collapsed.

Outputs

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

Nombre	Valor emitido	Uso en el template	Descripción
`collapsedChange`	`boolean`	`(collapsedChange)="onCollapsedChange($event)"`	Propone el siguiente estado booleano de plegado.

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.

Nombre	Mecanismo	Contrato
`*` Cuerpo del panel Ver ejemplo	Proyección de contenido Proyecta contenido y acciones gestionadas por la aplicación.	`<ng-content />` Contexto utilizado: `—`

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Cuerpo del panel

*

El contenido proyectado puede incluir acciones.

Confirmaciones: 0

Public Types

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

NeuScrollAreaVariantTypeScript

import type { NeuScrollAreaVariant } from '@neural-ui/core/panel';

// Declaración pública (solo referencia)
export type NeuScrollAreaVariant = 'auto' | 'hover' | 'scroll' | 'always' | 'hidden';

NeuScrollPositionTypeScript

import type { NeuScrollPosition } from '@neural-ui/core/panel';

// Declaración pública (solo referencia)
export interface NeuScrollPosition {
  clientHeight: number;
  clientWidth: number;
  left: number;
  scrollHeight: number;
  scrollWidth: number;
  top: number;
}

Estilos y tokens

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.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring`	Anillo normal del foco de teclado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`
`--neu-surface-3`	Superficies de controles destacados y al pasar el puntero	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#e2e8f0`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-scroll-area-thumb`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-border)`