Descripción general del componente de la ventana de diálogo Angular

Utilice el componente Ignite UI for Angular para mostrar mensajes o presentar formularios para que los usuarios los completen. El componente abre una ventana de diálogo centrada en la parte superior del contenido de la aplicación. También puede proporcionar un mensaje de alerta estándar que los usuarios pueden cancelar.

Angular Dialog Window Example

Getting Started with Ignite UI for Angular Dialog Window

Para comenzar con el componente Ignite UI for Angular Dialog Window, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxDialogModule en su archivo app.module.ts.

// app.module.ts

...
import { IgxDialogModule } from 'igniteui-angular';
// import { IgxDialogModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDialogModule],
    ...
})
export class AppModule {}

Alternativamente, a partir de 16.0.0, puede importar IgxDialogComponent como una dependencia independiente o usar el token IGX_DIALOG_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';
// import { IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>

    <igx-dialog #alert
        title="Notification"
        message="Your email has been sent successfully!"
        leftButtonLabel="OK"
        (leftButtonSelect)="alert.close()">
    </igx-dialog>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective]
    /* or imports: [IgxDialogComponent, IgxButtonDirective, IgxRippleDirective] */
})
export class HomeComponent {}

Ahora que ha importado el módulo o las directivas Ignite UI for Angular Dialog Window, puede comenzar a usar el componente igx-dialog.

Using the Angular Dialog Window

Alert Dialog

Para crear un cuadro de diálogo de alerta, en la plantilla de nuestro componente de correo electrónico, agregamos el siguiente código. Tenemos que configurar el title, message, leftButtonLabel y manejar el evento leftButtonSelect:

<!--email.component.html-->
<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>

<igx-dialog #alert
    title="Notification"
    message="Your email has been sent successfully!"
    leftButtonLabel="OK"
    (leftButtonSelect)="alert.close()">
</igx-dialog>

Si todo se hace correctamente, debería ver la muestra de demostración que se muestra arriba en su navegador.

Standard Dialog

Para crear un cuadro de diálogo estándar, en la plantilla de nuestro componente de administrador de archivos, agregamos el siguiente código. Tenemos que configurar el title, message, leftButtonLabel, rightButtonLabel y manejar los eventos leftButtonSelect y rightButtonSelect:

<!--file-manager.component.html-->
<button igxButton="contained" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button>

<igx-dialog #dialog title="Confirmation"
    leftButtonLabel="Cancel"
    (leftButtonSelect)="dialog.close()"
    rightButtonLabel="OK"
    (rightButtonSelect)="onDialogOKSelected($event)"
    message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?">
</igx-dialog>

Custom Dialog

Para crear un cuadro de diálogo personalizado, en la plantilla de nuestro componente de inicio de sesión, agregamos el siguiente código. El área del título del diálogo se puede personalizar usando la directiva igxDialogTitle o el selector igx-dialog-title. El área de acciones se puede personalizar utilizando la directiva igxDialogActions o el selector igx-dialog-actions. Agregamos dos grupos de entrada que constan de una etiqueta y una entrada decorada con las directivas igxLabel e igxInput.

<!--sign-in.component.html-->
<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Custom Dialog</button>

<igx-dialog #form [closeOnOutsideSelect]="true">
    <igx-dialog-title>
        <div class="dialog-container">
            <igx-icon>vpn_key</igx-icon>
            <div class="dialog-title">Sign In</div>
        </div>
    </igx-dialog-title>

    <form class="signInForm">
        <igx-input-group>
            <igx-prefix>
                <igx-icon>person</igx-icon>
            </igx-prefix>
            <label igxLabel for="username">Username</label>
            <input igxInput id="username" type="text"/>
        </igx-input-group>
        <igx-input-group>
            <igx-prefix>
                <igx-icon>lock</igx-icon>
            </igx-prefix>
            <label igxLabel>Password</label>
            <input igxInput id="password" type="password"/>
        </igx-input-group>
    </form>

    <div igxDialogActions>
        <button igxButton (click)="form.close()">CANCEL</button>
        <button igxButton (click)="form.close()">SIGN IN</button>
    </div>
</igx-dialog>

Position and Animation Settings

Hay dos formas de cambiar la posición en la que se mostrará el igx-dialog:

• Usando el método open y pasando una overlaySettings válida. Ejemplo:

import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
// import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class HomeComponent {
    public positionSettingsOnOpen: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Right,
        verticalDirection: VerticalAlignment.Middle,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Middle,
    };
    public overlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(this.positionSettingsOnOpen),
        scrollStrategy: new NoOpScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };

    public openDialog() {
        this.alert.open(this.overlaySettings);
    }
}

• Usando positionSettings @Input. Ejemplo:

<igx-dialog #alert title="Notification" [positionSettings]="positionSettings" >
</igx-dialog>

import { useAnimation } from '@angular/animations';
import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
// import { PositionSettings, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class HomeComponent {
    public positionSettings: PositionSettings = {
        openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
        horizontalDirection: HorizontalAlignment.Left,
        verticalDirection: VerticalAlignment.Middle,
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Middle,
        minSize: { height: 100, width: 100 }
    };
}

Note

Se debe usar el mismo enfoque para la configuración de la animación, use las propiedades openAnimation y closeAnimation para definir parámetros de animación como la duración. Ejemplo de objeto params:

params: {
    delay: '0s',
    duration: '350ms',
    easing: EaseOut.quad,
    endOpacity: 1,
    fromPosition: 'translateX(-500px)',
    startOpacity: 0,
    toPosition: 'translateY(0)'
}

Trap focus inside dialog

De forma predeterminada, cuando se abre el cuadro de diálogo, el foco de la tecla Tab queda atrapado dentro de él, es decir, el foco no abandona el elemento cuando el usuario sigue tabulando a través de los elementos enfocables. Cuando el foco sale del último elemento se pasa al primero y viceversa, cuando se presiona SHIFT + TAB, cuando el foco sale del primer elemento se debe enfocar el último elemento. En caso de que el diálogo no contenga ningún elemento enfocable, el foco quedará atrapado en el propio contenedor del diálogo. Este comportamiento se puede cambiar configurando la propiedad focusTrap.

Estilismo

Para comenzar a diseñar la ventana de diálogo, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el dialog-theme y acepta parámetros que le dan estilo al diálogo.

$my-dialog-theme: dialog-theme(
    $background: #011627,
    $title-color: #ECAA53,
    $message-color: #FEFEFE,
    $border-radius: .3,
);

Note

Para aplicar estilo a cualquier componente adicional que se utilice como parte del contenido de la ventana de diálogo (como IgxButton), se debe crear un tema adicional que sea específico para el componente respectivo y que se coloque solo bajo el alcance de la ventana de diálogo (por lo que no no afecta al resto de la aplicación).

Dado que la ventana de diálogo utiliza IgxOverlayService, para que nuestro tema personalizado llegue a la ventana de diálogo que queremos diseñar, proporcionaremos una salida específica donde la ventana de diálogo se colocará en el DOM cuando esté visible.

<div igxOverlayOutlet>
    <igx-dialog #dialog1>
        <!-- .... -->
    </igx-dialog>
</div>

Note

Para obtener más información sobre las diversas opciones para proporcionar temas a los elementos que se muestran mediante IgxOverlayService, puede consultar el tema Estilo de superposición.

Including Themes

El último paso es incluir el tema del componente en nuestra aplicación.

Si $legacy-support está configurado en true, incluya el tema así:

 @include dialog($my-dialog-theme);

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep

:host {
     ::ng-deep {
        @include dialog($my-dialog-theme);
    }
}

Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:

@include css-vars($my-dialog-theme);

Note

Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.

:host {
    @include css-vars($my-dialog-theme);
}

Demo

API Summary

• Componente de diálogo Igx
• Estilos de componentes IgxDialog
• Superposición Igx
• Estilos de superposición Igx

Theming Dependencies

• Tema IgxButton
• Tema IgxRipple
• Tema IgxOverlay

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub