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.
Ejemplo de ventana de diálogo Angular
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Comenzando con Ignite UI for Angular
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
cmd
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 {}
typescript
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 {}
typescript
Ahora que ha importado el módulo o las directivas Ignite UI for Angular Dialog Window, puede comenzar a usar el componente igx-dialog
.
Usando la ventana de diálogo Angular
Diálogo de alerta
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>
html
Si todo se hace correctamente, debería ver la muestra de demostración que se muestra arriba en su navegador.
Diálogo estándar
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>
html
Diálogo personalizado
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>
html
Configuración de posición y animación
Hay dos formas de cambiar la posición en la que se mostrará el igx-dialog
:
- Usando el método
open
y pasando unaoverlaySettings
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);
}
}
typescript
- Usando
positionSettings
@Input
. Ejemplo:
<igx-dialog #alert title="Notification" [positionSettings]="positionSettings" >
</igx-dialog>
html
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 }
};
}
typescript
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)'
}
typescript
Enfoque de trampa dentro del diálogo
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
.
Estilo
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';
scss
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,
);
scss
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>
html
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.
Incluyendo temas
El último paso es incluir el tema del componente en nuestra aplicación.
@include css-vars($my-dialog-theme);
scss
Si el componente usa un Emulated
ViewEncapsulation, es necesario usar penetrate
esta encapsulación::ng-deep
para aplicar los estilos.
:host {
::ng-deep {
@include css-vars($my-dialog-theme);
}
}
scss
Manifestación
Resumen de API
- Componente de diálogo Igx
- Estilos de componentes IgxDialog
- Superposición Igx
- Estilos de superposición Igx
Dependencias temáticas
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.