Sidebar | Neural UI v2

Uso

La aplicación gestiona open. Conéctalo y acepta closeRequested aplicando false cuando proceda cerrar. opened y closed informan de transiciones, no sustituyen open. Proyecta el contenido y los espacios de cabecera o pie disponibles. Mantén un activador con nombre para recuperar el foco. Bloquear el cierre automático no debe eliminar una acción explícita para terminar.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Eventos: 0

disableClose

persistent

collapsed

Opciones avanzadas · 5

<div class="remaining-preview">
  @if (!persistent()) {
    <button
    neu-button
    (neuClick)="open.set(true)"
  >
      {{ t('Open example', 'Abrir ejemplo') }}
    </button>
  }
  <div
    class="remaining-sidebar-layout"
    [class.remaining-sidebar-layout--persistent]="persistent()"
    [class.remaining-sidebar-layout--right]="side() === 'right'"
    [style.--remaining-sidebar-width]="collapsed() ? '3.75rem' : '16rem'"
  >
    <neu-sidebar
    [hideHeader]="false"
    [initialCollapsed]="false"
    [restoreFocus]="true"
    [open]="open()"
    [side]="'left'"
    [persistent]="false"
    [collapsed]="false"
    (collapsedChange)="collapsed.set($event)"
    [closeOnEscape]="true"
    (closeRequested)="open.set(false); record('closeRequested', $event)"
    (opened)="record('opened')"
    (closed)="record('closed')"
  [ariaLabel]="'Navegación de ejemplo'"
  [closeLabel]="'Cerrar navegación'"
>
      <div class="remaining-sidebar-links">
        @for (section of sections; track section.id) {
          <button
            neu-button
            variant="ghost"
            [ariaLabel]="t(section.en, section.es)"
            [attr.aria-pressed]="activeSection() === section.id"
            (neuClick)="activeSection.set(section.id)"
          >
            <app-navigation-example-icon [kind]="section.icon" size="18" />
            @if (!collapsed()) {
              <span>{{ t(section.en, section.es) }}</span>
            }
          </button>
        }
      </div>
    <header neu-sidebar-header>
      <strong>{{ t('Workspace', 'Área de trabajo') }}</strong>
    </header>
    @if (!persistent()) {
      <div neu-sidebar-footer>
        <button neu-button variant="outline" (neuClick)="open.set(false)">
          {{ t('Done', 'Terminar') }}
        </button>
      </div>
    }
    </neu-sidebar>
    @if (persistent()) {
      <section class="remaining-sidebar-main">
        <h3>{{ sectionLabel() }}</h3>
        <p>
          {{
            t(
              'Persistent navigation stays visible beside the main content. The open input only controls overlay mode.',
              'La navegación persistente permanece visible junto al contenido. El input open solo controla el modo overlay.'
            )
          }}
        </p>
      </section>
    }
  </div>
</div>

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 open = signal(false);

Estado y eventos

La aplicación gestiona open. Conéctalo y acepta closeRequested aplicando false cuando proceda cerrar. opened y closed informan de transiciones, no sustituyen open. Proyecta el contenido y los espacios de cabecera o pie disponibles. Mantén un activador con nombre para recuperar el foco. Bloquear el cierre automático no debe eliminar una acción explícita para terminar.

Accesibilidad y teclado

Tab permanece en la superficie modal. Escape solicita cerrar cuando está habilitado. El cierre devuelve el foco al activador; Sidebar persistente es navegación de la página, no una tarea modal.

Tecla	Acción
`Tab`	En modo modal, recorre los controles de la superficie. Una Sidebar persistente sigue el orden normal de la página.
`Shift + Tab`	Recorre el foco en sentido inverso; en modo modal permanece dentro de la superficie.
`Escape`	Solicita cerrar cuando está habilitado; al cerrar, el foco vuelve al activador.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

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
`ariaLabel`	`string`	`'Navigation menu'`	`[ariaLabel]`	Nombre accesible del control o región.
`closeLabel`	`string`	`'Close navigation menu'`	`[closeLabel]`	Etiqueta de cerrar vista previa. Tradúcela para tu aplicación.
`closeOnEscape`	`boolean`	`true`	`[closeOnEscape]`	Permite que Escape solicite cerrar Sidebar.
`collapsed`	`boolean \| undefined`	`undefined`	`[collapsed]`	Estado contraído aplicado; undefined permite que el componente lo gestione.
`hideHeader`	`boolean`	`false`	`[hideHeader]`	Oculta la región de cabecera de Sidebar.
`initialCollapsed`	`boolean`	`false`	`[initialCollapsed]`	Estado inicial, aplicado una sola vez si se omite collapsed.
`open`	`boolean`	`false`	`[open]`	Visibilidad gestionada por la aplicación. Aplica false al aceptar una solicitud de cierre.
`persistent`	`boolean`	`false`	`[persistent]`	Renderiza el contenido lateral como parte de la página, no como overlay modal.
`restoreFocus`	`boolean`	`true`	`[restoreFocus]`	Devuelve el foco al activador original al cerrar.
`side`	`"left" \| "right"`	`'left'`	`[side]`	Elige el lado físico izquierdo o derecho de Sidebar.

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
`closed`	`void`	`(closed)="onClosed($event)"`	Informa del cierre de este componente. El tipo indica los datos emitidos.
`closeRequested`	`NeuCloseRequest`	`(closeRequested)="onCloseRequested($event)"`	Solicita cerrar con el motivo y evento original. La aplicación acepta aplicando open=false.
`collapsedChange`	`boolean`	`(collapsedChange)="onCollapsedChange($event)"`	Propone el siguiente estado contraído; actualiza collapsed si lo controlas.
`opened`	`void`	`(opened)="onOpened($event)"`	Informa de la apertura de este componente. El tipo indica los datos emitidos.

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
`[neu-sidebar-header]`Ver ejemplo	Proyección de contenido	`<ng-content select="[neu-sidebar-header]" />`
`*` Contenido proyectado Ver ejemplo	Proyección de contenido Contenido proporcionado por la aplicación.	`<ng-content />` Contexto utilizado: `—`
`[neu-sidebar-footer]`Ver ejemplo	Proyección de contenido	`<ng-content select="[neu-sidebar-footer]" />`

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

Public Types

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

NeuCloseReasonTypeScript

import type { NeuCloseReason } from '@neural-ui/core/foundation';

// Declaración pública (solo referencia)
export type NeuCloseReason = 'escape' | 'outside' | 'action' | 'programmatic-command';

NeuCloseRequestTypeScript

import type { NeuCloseReason } from '@neural-ui/core/foundation';

import type { NeuCloseRequest } from '@neural-ui/core/foundation';

// Declaración pública (solo referencia)
export interface NeuCloseRequest {
  readonly originalEvent?: Event;
  readonly reason: NeuCloseReason;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Token	Efecto	Estado / variante	Valor / origen	Alternativa
`--neu-sidebar-bg`	Valor del tema heredado que utiliza este componente	Superficie del campo	`var(--neu-surface)`Declaración raíz	`--neu-surface`
`--neu-sidebar-collapsed-width`	Valor del tema heredado que utiliza este componente	Superficie del campo	`60px`Declaración raíz	`Sin alias de token`
`--neu-sidebar-width`	Valor del tema heredado que utiliza este componente	Superficie del campo	`260px`Declaración raíz	`Sin alias de token`

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-strong`	Tratamiento de foco destacado	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.35)`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`
`--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-text-muted`	Etiquetas secundarias y contenido de ayuda	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#475569`

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.

Inputs

Outputs

Templates

[neu-sidebar-header]

Contenido proyectado

[neu-sidebar-footer]

Public Types

Tokens específicos

Tokens compartidos utilizados