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

Utilice el componente Ventana de diálogo Ignite UI for Angular para mostrar mensajes o presentar formularios para que los usuarios los rellenen. 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 puedan cancelar.

Angular Dialog Window Example

Getting Started with Ignite UI for Angular Dialog Window

Para empezar a utilizar el componente de Ignite UI for Angular ventana de diálogo, 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 al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxDialogModule en tu 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,16.0.0 puedes importarlosIgxDialogComponent como una dependencia independiente, o usar elIGX_DIALOG_DIRECTIVES token 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 tienes importado el módulo o directivas Ignite UI for Angular Ventana de Diálogo, puedes empezar a usar eligx-dialog componente.

Using the Angular Dialog Window

Alert Dialog

Para crear un diálogo de alertas, en la plantilla de nuestro componente de correo electrónico, añadimos el siguiente código. Tenemos que establecer eltitle,message yleftButtonLabel manejarleftButtonSelect el evento:

<!--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 diálogo estándar, en la plantilla de nuestro componente gestor de archivos, añadimos el siguiente código. Tenemos que establecer lostitle eventos,message​leftButtonLabel​rightButtonLabel y manejarleftButtonSelect yrightButtonSelect los eventos:

<!--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 diálogo personalizado, en la plantilla de nuestro componente de inicio de sesión, añadimos el siguiente código. El área de título del diálogo puede personalizarse usando laigxDialogTitle directiva o eligx-dialog-title selector. El área de acciones puede personalizarse usando laigxDialogActions directiva o eligx-dialog-actions selector. Añadimos dos grupos de entrada que consisten en 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á eligx-dialog lugar:

• Usandoopen método y pasando un validooverlaySettings. 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 elpositionSettings @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 los ajustes de animación, usando lasopenAnimation propiedades ycloseAnimation para definir parámetros de animación como la duración.params Ejemplo de objeto:

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

Trap focus inside dialog

Por defecto, cuando se abre el diálogo, el enfoque de la tecla Tab queda atrapado dentro de él, es decir, el enfoque no se sale del elemento cuando el usuario sigue moviendo la pestaña entre los elementos enfocables. Cuando el foco sale del último elemento, pasa al primero y viceversa; cuando se pulsa SHIFT + TAB, cuando el foco sale del primer elemento, el último elemento debe estar enfocado. En caso de que el diálogo no contenga elementos enfocables, el foco quedará atrapado en el contenedor del diálogo en sí. Este comportamiento puede cambiarse configurando lafocusTrap propiedad.

Estilismo

Dialog Theme Property Map

Cambiar la$background propiedad actualiza automáticamente las siguientes propiedades dependientes:

Propiedad principal	Propiedad dependiente	Descripción
$background	$title-color	El título del diálogo, color de texto.
	$message-color	El mensaje de diálogo en color de texto.
	$border color	El color del borde usado para el componente de diálogo.

Para empezar a estilizar la ventana de diálogo, necesitamos importar elindex archivo, donde están todas las funciones de tema y las mezclas 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 sencillo, creamos un nuevo tema que extiende ydialog-theme acepta parámetros que den estilo al diálogo. Al proporcionar el$background tema, el tema selecciona automáticamente los colores de contraste adecuados para las propiedades del primer plano. Sin embargo, aún puedes definirlos manualmente si lo deseas.

$my-dialog-theme: dialog-theme(
  $background: #011627,
  $title-color: #ecaa53,
  $border-radius: 5px,
);

Note

Para dar estilo a cualquier componente adicional que se utilice como parte del contenido de la ventana de diálogo (como elIgxButton), debe crearse un tema adicional específico para cada componente respectivo y que se coloque únicamente dentro del ámbito de la ventana de diálogo (para que no afecte al resto de la aplicación).

$custom-button: contained-button-theme(
  $background: #ecaa53,
  $foreground: #011627,
);

Como la ventana de diálogo utiliza elIgxOverlayService estilo para que nuestro tema personalizado llegue a la ventana de diálogo que queremos estilizar, proporcionaremos una salida específica donde la ventana de diálogo se colocará en el DOM cuando sea visible.

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

Note

Para aprender más sobre las distintas opciones para proporcionar temas a los elementos que se muestran usando elIgxOverlayService, puedes echar un vistazo al tema de estilismo Overlay.

Including Themes

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

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

Note

Si el componente utiliza unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación use::ng-deep para aplicar los estilos.

:host {
  ::ng-deep {
    @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
• Ignite UI for Angular GitHub