Componente

Dialog

Diálogo accesible con CDK Overlay, trampa de foco, cierre con Escape y soporte para tamaños sm, md, lg y fullscreen.

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

Pequeño

Mediano

Grande

Bloquear cierre

Formulario con footer

Scroll interno

import { NeuDialogComponent } from '@neural-ui/core/modal';
import { NeuButtonComponent } from '@neural-ui/core/button';

@Component({
  imports: [NeuDialogComponent, NeuButtonComponent],
  template: `
    <button neu-button (click)="open.set(true)">Open dialog</button>

    <neu-dialog
      [open]="open()"
      title="Confirm action"
      size="sm"
      layout="auto"
      [responsive]="true"
      [restoreFocus]="true"
      (closed)="open.set(false)"
    >
      <p>Are you sure you want to continue?</p>
      <div neu-dialog-footer>
        <button neu-button variant="ghost" (click)="open.set(false)">Cancel</button>
        <button neu-button (click)="open.set(false)">Confirm</button>
      </div>
    </neu-dialog>
  `,
})
export class MyComponent {
  open = signal(false);
}