Visão geral do componente Angular Dialog Window

Use o componente Ignite UI for Angular Dialog Window para exibir mensagens ou apresentar formulários para os usuários preencherem. O componente abre uma janela de diálogo centralizada no topo do conteúdo do aplicativo. Você também pode fornecer uma mensagem de alerta padrão que os usuários podem cancelar.

Angular Dialog Window Example

Getting Started with Ignite UI for Angular Dialog Window

Para começar a usar o componente Ignite UI for Angular Dialog Window, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxDialogModule no seu arquivo 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 {}

Como alternativa, a partir da 16.0.0, você pode importar o IgxDialogComponent como uma dependência autônoma ou usar o token IGX_DIALOG_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// 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 {}

Agora que você importou o módulo Ignite UI for Angular ou as diretivas, você pode começar a usar o componente igx-dialog.

Using the Angular Dialog Window

Alert Dialog

Para criar um diálogo de alerta, no template do nosso componente de e-mail, adicionamos o seguinte código. Temos que definir o title, message, leftButtonLabel e manipular o 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>

Se tudo for feito corretamente, você deverá ver o exemplo de demonstração mostrado acima no seu navegador.

Standard Dialog

Para criar um diálogo padrão, no modelo do nosso componente gerenciador de arquivos, adicionamos o seguinte código. Temos que definir o title, message, leftButtonLabel, rightButtonLabel e manipular os eventos leftButtonSelect e 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 criar um diálogo personalizado, no modelo do nosso componente de login, adicionamos o seguinte código. A área de título do diálogo pode ser personalizada usando a diretiva igxDialogTitle ou o seletor igx-dialog-title. A área de ações pode ser personalizada usando a diretiva igxDialogActions ou o seletor igx-dialog-actions. Adicionamos dois grupos de entrada consistindo de um rótulo e uma entrada decorada com as diretivas 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

Há duas maneiras de alterar a posição em que o igx-dialog será exibido:

• Usando o método open e passando um overlaySettings válido. Exemplo:

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. Exemplo:

<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

A mesma abordagem deve ser usada para as configurações de animação, use as propriedades openAnimation e closeAnimation para definir parâmetros de animação, como duração. Exemplo 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

Por padrão, quando o diálogo é aberto, o foco da tecla Tab fica preso dentro dele, ou seja, o foco não sai do elemento quando o usuário continua tabulando pelos elementos focalizáveis. Quando o foco sai do último elemento, ele se move para o primeiro e vice-versa, quando SHIFT + TAB é pressionado, quando o foco sai do primeiro elemento, o último elemento deve ser focado. Caso o diálogo não contenha nenhum elemento focalizável, o foco ficará preso no próprio contêiner do diálogo. Esse comportamento pode ser alterado definindo a propriedade focusTrap.

Estilização

Para começar a estilizar a janela de diálogo, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

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

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

Seguindo a abordagem mais simples, criamos um novo tema que estende o dialog-theme e aceita parâmetros que estilizam o diálogo.

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

Note

Para estilizar quaisquer componentes adicionais que são usados como parte do conteúdo da janela de diálogo (como o IgxButton), um tema adicional deve ser criado, específico para o respectivo componente e colocado somente no escopo da janela de diálogo (para que não afete o restante do aplicativo).

Como a janela de diálogo usa o IgxOverlayService, para que nosso tema personalizado alcance a janela de diálogo que queremos estilizar, forneceremos uma saída específica onde a janela de diálogo será colocada no DOM quando estiver visível.

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

Note

Para saber mais sobre as várias opções para fornecer temas aos elementos que são exibidos usando o IgxOverlayService, você pode dar uma olhada no tópico Estilo de sobreposição.

Including Themes

O último passo é incluir o tema do componente em nosso aplicativo.

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

Note

Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate nesse encapsulamento usando::ng-deep para aplicar os estilos.

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

Demo

API Summary

• Componente IgxDialog
• Estilos IgxDialogComponent
• IgxOverlay
• Estilos IgxOverlay

Theming Dependencies

• Tema IgxButton
• Tema IgxRipple
• Tema IgxOverlay

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub