Angular Dialog Window 구성 요소 개요

Ignite UI for Angular Dialog Window 구성 요소를 사용하여 메시지를 표시하거나 사용자가 작성할 양식을 제시합니다. 이 구성 요소는 앱 콘텐츠 위에 가운데에 있는 대화 상자를 엽니다. 사용자가 취소할 수 있는 표준 알림 메시지를 제공할 수도 있습니다.

Angular Dialog Window 예제

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxButtonDirective, IgxRippleDirective, IgxDialogComponent } from 'igniteui-angular';

@Component({
    selector: 'app-dialog-sample-1',
    styleUrls: ['./dialog-sample-1.component.scss'],
    templateUrl: './dialog-sample-1.component.html',
    imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent]
})
export class DialogSample1Component { }
tsコピー

<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コピー

:host {
    display: block;
    padding: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular 시작하기

Ignite UI for Angular Dialog Window 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angularcmd

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 IgxDialogModule 당신의 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

또는 16.0.0부터 IgxDialogComponent 독립 실행형 종속성으로 가져오거나 IGX_DIALOG_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.

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

이제 Ignite UI for Angular Dialog Window 모듈 또는 지시문을 가져왔으므로 구성 요소를 사용할 igx-dialog 수 있습니다.

Angular Dialog 창 사용

경고 대화 상자

경고 대화 상자를 만들기 위해 이메일 구성 요소의 템플릿에 다음 코드를 추가합니다. title, message, leftButtonLabel 설정하고 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

모든 작업이 올바르게 완료되면 위에 표시된 데모 샘플이 브라우저에 표시됩니다.

표준 대화 상자

표준 대화 상자를 만들기 위해 파일 관리자 구성 요소의 템플릿에 다음 코드를 추가합니다. title, message, leftButtonLabel, rightButtonLabel 설정하고 leftButtonSelect 및 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

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxButtonDirective, IgxRippleDirective, IgxDialogComponent } from 'igniteui-angular';

@Component({
    selector: 'app-dialog-sample-2',
    styleUrls: ['./dialog-sample-2.component.scss'],
    templateUrl: './dialog-sample-2.component.html',
    imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent]
})
export class DialogSample2Component {

    constructor() { }

    public onDialogOKSelected(event) {
        event.dialog.close();
    }
}
tsコピー

<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 Annual_Report_2016.pdf and Annual_Report_2017.pdf files?">
</igx-dialog>
htmlコピー

:host {
    display: block;
    padding: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

사용자 정의 대화 상자

사용자 정의 대화 상자를 만들기 위해 로그인 구성 요소의 템플릿에 다음 코드를 추가합니다. 대화 상자 제목 영역은 igxDialogTitle 지시어 또는 igx-dialog-title 선택기를 사용하여 사용자 정의할 수 있습니다. 작업 영역은 igxDialogActions 지시어 또는 igx-dialog-actions 선택기를 사용하여 사용자 정의할 수 있습니다. igxLabel 및 igxInput 지시문으로 장식된 레이블 및 입력으로 구성된 두 개의 입력 그룹을 추가합니다.

Show Custom Dialog


    
        

            vpn_key
            
Sign In
        
    

    

        
            
                person
            
            Username
            
        
        
            
                lock
            
            Password
            
        
    

    

        CANCEL
        SIGN IN
    

--><!--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

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxButtonDirective, IgxRippleDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxDialogActionsDirective } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-dialog-sample-3',
    styleUrls: ['./dialog-sample-3.component.scss'],
    templateUrl: './dialog-sample-3.component.html',
    imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxDialogActionsDirective]
})
export class DialogSample3Component {

    constructor() { }

    public signIn(event) {
        event.dialog.close();
    }
}
tsコピー

<button igxButton="contained" igxRipple="white" (click)="form.open()">Show Custom Dialog</button>

<igx-dialog #form [closeOnOutsideSelect]="true">
    <igx-dialog-title>
        <div class="title-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コピー

:host {
    display: block;
    padding: 16px;
}

.signInForm {
    igx-input-group + igx-input-group {
        margin-top: 24px;
    }
}

.title-container{
    display: flex;

    igx-icon {
        margin-right: 8px;
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

위치 및 애니메이션 설정

​igx-dialog 표시되는 위치를 변경하는 방법에는 두 가지가 있습니다.

• ​open 메소드를 사용하고 유효한 overlaySettings 전달하십시오. 예:

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

• ​positionSettings ​ ​@Input 사용. 예:

<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

애니메이션 설정에도 동일한 접근 방식을 사용해야 하며, openAnimation 및 closeAnimation 속성을 사용하여 지속 시간과 같은 애니메이션 매개변수를 정의해야 합니다. params 객체 예:

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

대화 상자 내부 트랩 포커스

기본적으로 대화 상자가 열리면 Tab 키 포커스가 그 안에 갇혀 있습니다. 즉, 사용자가 포커스 가능한 요소를 계속 탭하여 이동할 때 포커스는 요소를 떠나지 않습니다. 포커스가 마지막 요소를 벗어나면 첫 번째 요소로 이동하고 그 반대의 경우도 마찬가지입니다. SHIFT + TAB을 누르면 포커스가 첫 번째 요소를 벗어나면 마지막 요소에 포커스가 맞춰져야 합니다. 대화 상자에 포커스 가능한 요소가 포함되어 있지 않은 경우 포커스는 대화 상자 컨테이너 자체에 갇히게 됩니다. 이 동작은 focusTrap 속성을 설정하여 변경할 수 있습니다.

스타일링

대화 상자 창 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

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

가장 간단한 접근 방식에 따라 dialog-theme 확장하고 대화 상자 스타일을 지정하는 매개 변수를 허용하는 새 테마를 만듭니다.

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

대화 상자 창 콘텐츠(예: IgxButton)의 일부로 사용되는 추가 구성 요소의 스타일을 지정하려면 해당 구성 요소와 관련된 추가 테마를 만들어야 하며 대화 상자 창의 범위에만 배치되어야 합니다. 나머지 응용 프로그램에는 영향을 미치지 않습니다).

대화 상자 창은 IgxOverlayService 사용하므로 사용자 정의 테마가 스타일을 지정하려는 대화 상자 창에 도달할 수 있도록 대화 상자 창이 표시될 때 DOM에 배치될 특정 콘센트를 제공합니다.

  
html