Angular Dialog Window 구성 요소 개요

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

Angular Dialog Window Example

Getting Started with Ignite UI for Angular Dialog Window

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

ng add igniteui-angular

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

또는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 {}

이제 Ignite UI for Angular 대화 창 모듈이나 지시어를 가져왔으니 컴포넌트igx-dialog 사용을 시작할 수 있습니다.

Using the Angular Dialog Window

Alert Dialog

알림 대화 창을 만들기 위해 이메일 구성 요소의 템플릿에 다음 코드를 추가합니다. 우리는 이벤트를titlemessageleftButtonLabel 설정하고 처리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>

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

Standard Dialog

표준 대화 상자를 만들기 위해 파일 관리자 구성 요소의 템플릿에 다음 코드를 추가합니다. 우리는 다음의 이벤트를 설정해야 합니다titlemessageleftButtonLabelrightButtonLabelleftButtonSelectrightButtonSelect:

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

사용자 지정 대화 창을 만들기 위해 로그인 컴포넌트 템플릿에 다음 코드를 추가합니다. 대화 제목 영역은 지시문이나igxDialogTitle 선택기를 사용해igx-dialog-title 커스터마이즈할 수 있습니다. 행동 영역은 지시나igxDialogActions 선택기를 사용해igx-dialog-actions 커스터마이징할 수 있습니다. 레이블과 그리고 igxLabel과 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

표시 위치를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);
    }
}

사용.positionSettings @Input 본보기:

<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

애니메이션 설정에도 같은 접근법을 적용해야 하며, andopenAnimation 속성을 사용closeAnimation 해 지속 시간 같은 애니메이션 파라미터를 정의하세요.params 물건 예시:

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

Trap focus inside dialog

기본적으로 대화상자가 열릴 때 탭 키 포커스가 그 안에 갇히며, 사용자가 포커스 가능한 요소를 계속 탭핑해도 포커스가 요소를 떠나지 않습니다. 초점이 마지막 요소를 떠나면 첫 번째 요소로 이동하고, 그 반대도 마찬가지입니다. SHIFT + TAB을 누르면 초점이 첫 번째 요소를 떠나면 마지막 요소가 초점을 맞춰야 합니다. 대화에 집중 가능한 요소가 없으면 초점이 대화 컨테이너 자체에 갇히게 됩니다. 이 동작은 속성을 설정focusTrap 함으로써 변경할 수 있습니다.

스타일링

Dialog Theme Property Map

속성을 변경하면$background 다음 종속 속성들이 자동으로 업데이트됩니다:

기본 속성	종속 속성	설명
$background	$title색	대화 제목 텍스트 색상.
	$message색	대화 메시지 텍스트 색상.
	$border색	대화 구성 요소에 사용되는 테두리 색상.

대화 창 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹스인이 있는 파일을 가져와index야 합니다:

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

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

가장 간단한 방법을 따라, 대화 스타일을 만드는 매개변수를 확장dialog-theme 하고 수용하는 새로운 테마를 만듭니다. 를 제공$background 함으로써 테마는 전경 속성에 적합한 대비 색상을 자동으로 선택합니다. 하지만 원한다면 수동으로 정의할 수도 있습니다.

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

Note

대화 창 내용의 일부로 사용되는 추가 컴포넌트(예: theIgxButton)를 스타일링하려면, 해당 컴포넌트에 특화된 추가 테마를 생성하고 대화 창의 범위 내에 배치해야 하며(그래야 애플리케이션의 나머지 부분에 영향을 주지 않습니다).

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

대화 창IgxOverlayService이 스타일링하려는 대화 창 아래로 커스텀 테마가 도달하도록, 대화 창이 보이면 DOM에 배치되는 특정 아웃렛을 제공합니다.

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

Note

보여준 요소IgxOverlayService에 테마를 제공하는 다양한 옵션에 대해 더 알고 싶다면, 오버레이 스타일링 주제를 살펴보세요.

Including Themes

마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

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

Note

만약 컴포넌트가 ViewEncapsulation을 사용Emulated 한다면, 스타일을 적용하려면 이 캡슐화penetrate가::ng-deep 필요합니다.

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

Demo

API Summary

Theming Dependencies

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.