Dialog

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.

Prueba y configura

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

<button
    neu-button
    (neuClick)="open.set(true)"
  >
    {{ t('Open example', 'Abrir ejemplo') }}</button
  ><neu-dialog
    [maximized]="undefined"
    [responsive]="true"
    [restoreFocus]="true"
    [open]="open()"
    [size]="'md'"
    [disableClose]="false"
    [draggable]="false"
    [resizable]="false"
    [maximizable]="false"
    [layout]="'auto'"
    (closeRequested)="open.set(false); record('closeRequested', $event)"
    (maximizedChange)="onMaximizedChange($event)"
  (opened)="record('opened')"
    (closed)="record('closed')"
  [maximizeLabel]="'Maximizar'"
  [resizeLabel]="'Redimensionar'"
  [restoreLabel]="'Restaurar'"
  [title]="'Revisar cambios'"
><p>
      {{
        t(
          'Review the content, then close to return to the trigger.',
          'Revisa el contenido y cierra para regresar al activador.'
        )
      }}
    </p>
    <button
      neu-button
      variant="ghost"
      (neuClick)="nestedOpen.set(true)"
    >
      {{ t('Open nested dialog', 'Abrir diálogo anidado') }}
    </button>
    <neu-dialog
      [open]="nestedOpen()"
      [title]="t('Confirm details', 'Confirmar detalles')"
      (closeRequested)="
        nestedOpen.set(false); record('nestedCloseRequested', $event)
      "
    >
      <p>
        {{
          t(
            'Close this dialog to return to the parent.',
            'Cierra este diálogo para volver al padre.'
          )
        }}
      </p>
      <div neu-dialog-footer>
        <button
          neu-button
          (neuClick)="nestedOpen.set(false)"
        >
          {{ t('Return', 'Volver') }}
        </button>
      </div>
    </neu-dialog>
    <div neu-dialog-footer>
      <button
        neu-button
        variant="outline"
        (neuClick)="open.set(false)"
      >
        {{ t('Done', 'Terminar') }}
      </button>
    </div></neu-dialog
  >

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.

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.

Outputs

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

Public Types

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

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

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

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;
}

import type { NeuDialogData } from '@neural-ui/core/modal';

// Declaración pública (solo referencia)
export interface NeuDialogData<T = unknown> {
  data?: T;
  title?: string;
}

import type { NeuDialogLayout } from '@neural-ui/core/modal';

// Declaración pública (solo referencia)
export type NeuDialogLayout = 'auto' | 'viewport';

import type { NeuDialogSize } from '@neural-ui/core/modal';

// Declaración pública (solo referencia)
export type NeuDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';

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.

Componentes relacionados

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

• BottomSheet
• Sidebar
• ConfirmDialog