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

Alternativamente,16.0.0 você pode importarIgxDialogComponent como uma dependência independente ou usar oIGX_DIALOG_DIRECTIVES token 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 ou diretivas da Janela de Diálogo Ignite UI for Angular, pode começar a usar oigx-dialog componente.

Using the Angular Dialog Window

Alert Dialog

Para criar um diálogo de alerta, no modelo do nosso componente de e-mail, adicionamos o seguinte código. Temos que definir otitle,message eleftButtonLabel lidarleftButtonSelect com o 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>

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 otitle,message​leftButtonLabel,rightButtonLabel,, e handleleftButtonSelect erightButtonSelect 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 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 aigxDialogTitle diretiva ou oigx-dialog-title seletor. A área de ações pode ser personalizada usando aigxDialogActions diretiva ou oigx-dialog-actions seletor. Adicionamos dois grupos de entrada compostos por 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

Existem duas maneiras de alterar a posição em que oigx-dialog será mostrado:

• Usandoopen método e passar um válidooverlaySettings. 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 opositionSettings @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, usando asopenAnimation propriedades ecloseAnimation para definir parâmetros de animação como duração.params Exemplo 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 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 alternando 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 elementos focalizáveis, o foco ficará preso no próprio contêiner de diálogo. Esse comportamento pode ser alterado ao definir afocusTrap propriedade.

Estilização

Dialog Theme Property Map

Alterar a$background propriedade atualiza automaticamente as seguintes propriedades dependentes:

Propriedade primária	Propriedade dependente	Descrição
$background	$title cor	O título do diálogo, cor do texto.
	$message cor	A mensagem de diálogo cor de texto.
	$border cor	A cor da borda usada para o componente de diálogo.

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

@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 edialog-theme aceita parâmetros que estilizam o diálogo. Ao fornecer isso$background, o tema seleciona automaticamente cores de contraste adequadas para as propriedades em primeiro plano. No entanto, você ainda pode defini-los manualmente, se desejar.

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

Note

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

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

Como a janela de diálogo usaIgxOverlayService, 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 de fornecer temas para os elementos mostrados ao usar o OIgxOverlayService, você pode dar uma olhada no tópico de estilo Overlay.

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 umEmulated ViewEncapsulation, é necessário quepenetrate esse encapsulamento use::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