Dialog Window

Ignite UI for Angular Dialog Window コンポーネントをメッセージを表示するか、入力フォームを表示するために使用します。コンポーネントはアプリケーション コンテンツの中央上にダイアログ ウィンドウを開きます。キャンセル可能な標準の警告メッセージを提供できます。

Dialog デモ

使用方法

Ignite UI for Angular Dialog Window を初期化する前に、[IgxDialogModule] を app.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxDialogModule } from 'igniteui-angular';

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

警告

通知を追加するには、メール コンポーネントのテンプレートで、以下のコードを追加すると通知ダイアログが作成されます。titlemessageleftButtonLabel を設定し、onLeftButtonSelect イベントを処理します。

<!--email.component.html-->

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

標準ダイアログ

規格のダイアログを追加するには、ファイル マネージャー コンポーネントのテンプレートで、以下のコードを追加すると規格のダイアログが作成されます。titlemessageleftButtonLabelrightButtonLabel を設定し、onLeftButtonSelect および onRightButtonSelect イベントを処理します。

<!--file-manager.component.html-->

<igx-dialog #dialog title="Confirmation"
    leftButtonLabel="Cancel"
    (onLeftButtonSelect)="dialog.close()"
    rightButtonLabel="OK"
    (onRightButtonSelect)="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>

カスタム ダイアログ

カスタム ダイアログを追加するには、サインイン コンポーネントのテンプレートで、以下のコードを追加するとカスタム ダイアログが作成されます。titleleftButtonLabelrightButtonLabelcloseOnOutsideSelect を設定し、onLeftButtonSelect および onRightButtonSelect イベントを処理します。 また、igxLabel および igxInput ディレクティブでデコレートされるラベルおよび入力の 2 つのグループを追加できます。

<!--sign-in.component.html-->

<igx-dialog #form title="Sign In"
    leftButtonLabel="Cancel"
    (onLeftButtonSelect)="form.close()"
    (onRightButtonSelect)="signIn($event)"
    rightButtonLabel="Sign In"
    [closeOnOutsideSelect]="true">
    <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>
</igx-dialog>

タイトルとアクションのカスタマイズ

ダイアログ タイトル領域は igxDialogTitle ディレクティブまたは igx-dialog-title セレクターを使ってカスタマイズできます。また、アクション領域は igxDialogActions ディレクティブまたは igx-dialog-actions セレクターを使ってカスタマイズできます。

<!-- dialog.component.html -->

<igx-dialog #dialog [closeOnOutsideSelect]="true" message="This will create a new social media account.">
    <igx-dialog-title>
        <div class="dialog-container">
            <igx-icon>account_box</igx-icon>
            <div class="dialog-title">Create a new account?</div>
        </div>
    </igx-dialog-title>
    <div igxDialogActions class="dialog-container dialog-actions">
        <button igxButton (click)="dialog.close()">CREATE</button>
        <button igxButton (click)="dialog.close()">CANCEL</button>
    </div>
</igx-dialog>

Styling

To get started with styling the dialog window, we need to import the index file, where all the theme functions and component mixins live:

@import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the igx-dialog-theme and accepts the $background, $title-color, $message-color, $border-radius and $shadow parameters.

$color-1: rgb(119, 119, 119);
$color-2: #1c83e4;
$color-3: rgb(16, 4, 51);

$elevations-color: igx-elevations($color-1 , $color-2, $color-3);

$my-dialog-theme: igx-dialog-theme(
    $background: #000000,
    $title-color: #1c83e4,
    $message-color: #ffffff,
    $border-radius: .3,
    $shadow: igx-elevation($elevations-color, 14)
);
Note

As we see the $shadow parameter accepts igx-elevation, which is of type box-shadow. In order to learn more about various options for IgniteUI Shadows, you can take a look at this link.

Note

In order to style any additional components that are used as part of the dialog window's content (such as IgxButton), an additional theme should be created that is specific to the respective component and placed under the dialog window's scope only (so it does not affect the rest of the application).

Since the dialog window uses the IgxOverlayService, in order for our custom theme to reach down the dialog window that we want to style, we will provide a specific outlet where the dialog window will be placed in the DOM when it is visible.

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

In order to learn more about various options for providing themes to elements that are shown by using the IgxOverlayService, you can take a look at this link.

The last step is to include the component mixins:

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

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep:

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

Defining a color palette

Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette and igx-color functions.

igx-palette generates a color palette based on the primary and secondary colors that are passed:

$black-color: #000000;
$light-blue-color: #1c83e4;
$white-color: #ffffff;

$custom-palette: igx-palette(
    $primary: $black-color,
    $secondary: $light-blue-color,
    $info: $white-color
);

And then with igx-color we can easily retrieve color from the palette.

$my-dialog-theme: igx-dialog-theme(
    $background: igx-color($custom-palette, "primary", 500),
    $title-color: igx-color($custom-palette, "secondary", 500),
    $message-color: igx-color($custom-palette, "info", 500),
    $border-radius: .3,
    $shadow: igx-elevation($elevations-color, 14)
);
Note

The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please refer to Palettes topic for detailed guidance on how to use them.

Using Schemas

Going further with the theming engine, you can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.

Extend one of the two predefined schemas, that are provided for every component, in this case - _light-dialog:

// Extending the light dialog schema
$custom-dialog-schema: extend($_light-dialog,
    (
        background: igx-color($custom-palette, "primary", 500),
        title-color: igx-color($custom-palette, "secondary", 500),
        message-color: igx-color($custom-palette, "info", 500),
        border-radius: .3,
        shadow: igx-elevation($elevations-color, 14)
    )
);

In order to apply our custom schema we have to extend one of the globals (light or dark), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:

// Extending the global light-schema
$my-custom-schema: extend($light-schema, 
    (
        igx-dialog: $custom-dialog-schema
    )
);

// Defining our custom theme with the custom schema
$my-dialog-theme: igx-dialog-theme(
  $palette: $custom-palette,
  $schema: $my-custom-schema
);

Don't forget to include the themes in the same way as it was demonstrated above.

Demo

API まとめ

追加のリソース

コミュニティに参加して新しいアイデアをご提案ください。