Angular Toast 구성 요소 개요

Ignite UI for Angular 자동으로 숨겨지고 비대화형이며 사용자가 닫을 수 없는 정보와 경고 메시지를 제공합니다. 알림은 페이지 하단, 중간, 상단에 표시될 수 있습니다.

Angular Toast Example

Getting Started with Ignite UI for Angular Toast

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

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxToastModule 당신의 app.module.ts 파일.

// app.module.ts

...
import { IgxToastModule } from 'igniteui-angular';
// import { IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package

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

또는 16.0.0부터 IgxToastComponent 독립형 종속성으로 가져올 수 있습니다.

// home.component.ts

import { IgxToastComponent, IgxButtonDirective } from 'igniteui-angular';
// import { IgxToastComponent, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <button igxButton="contained" (click)="toast.open()">Show notification</button>
    <igx-toast #toast>Notification displayed</igx-toast>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxToastComponent, IgxButtonDirective]
    /* or imports: [IgxTimePickerComponent, IgxButtonDirective] */
})
export class HomeComponent {
    public time: Date;
}

이제 Ignite UI for Angular 가져왔으므로 igx-toast 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Toast

Show Toast

토스트 구성 요소를 표시하려면 open() 메서드를 사용하고 버튼 클릭 시 호출합니다. 요소 내부에 토스트 콘텐츠를 전달할 수 있습니다.

<!--sample.component.html-->

<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast>Notification displayed</igx-toast>

알림 내용을 설정하는 또 다른 방법은 메시지를 open() 메서드에 매개 변수로 직접 전달하는 것입니다.

<!--sample.component.html-->

<button igxButton="contained" (click)="toast.open('Notification displayed')">Show notification</button>
<igx-toast #toast></igx-toast>

open() 메소드는 AppComponent 파일에서 메시지 값을 관리하는 데 사용될 수도 있습니다.

// app.component.ts
@ViewChild('toast', { read: IgxToastComponent }) public toast: IgxToastComponent;

public message: any;

public ngOnInit() {
    this.message = 'Display message';
}

public showMessage() {
    this.toast.open(this.message);
}

Warning

igx-toast 구성요소 show 및 hide 메소드는 더 이상 사용되지 않습니다. 대신 open 및 close 사용해야 합니다.

Examples

Hide/Auto Hide

일단 열리면 토스트는 처음에 4000밀리초로 설정된 displayTime 입력에 지정된 기간 후에 사라집니다. 이 동작은 기본적으로 활성화되어 있지만 autoHide false로 설정하여 변경할 수 있습니다. 이렇게 하면 토스트가 계속 보입니다. toast close() 메서드를 사용하면 구성 요소를 닫을 수 있습니다.

<!--sample.component.html-->

<button igxButton="contained" (click)="toast.open()">Show Toast</button>
<button igxButton="contained" (click)="toast.close()">Hide Toast</button>
<igx-toast #toast [autoHide]="false">Notification displayed</igx-toast>

샘플이 올바르게 구성된 경우 표시 버튼을 클릭하면 토스트가 나타납니다. 첫 번째 구성 요소의 경우 자동 숨기기 기능이 비활성화되고 '숨기기' 버튼을 클릭하면 토스트가 사라집니다. 다른 두 구성 요소에서는 open() 메서드를 통해 다양한 메시지를 전달하고 콘텐츠 프로젝션을 사용하는 방법을 실제로 확인할 수 있습니다.

Display Time

displayTime 사용하고 밀리초 단위의 간격으로 설정하여 토스트 구성 요소가 표시되는 시간을 구성합니다.

<!--sample.component.html-->

<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast displayTime="1000">Notification displayed</igx-toast>

샘플이 올바르게 구성되면 토스트 자동이 더 빨리 숨겨집니다.

Positioning

positionSettings 속성을 사용하여 토스트가 표시되는 위치를 구성합니다. 기본적으로 페이지 하단에 표시됩니다. 아래 샘플에서는 상단 위치에 알림이 표시되도록 설정했습니다.

<!--sample.component.html-->
<div>
    <button igxButton="contained" (click)="open(toast)">Show notification on top</button>
    <igx-toast #toast>Notification displayed</igx-toast>
</div>

// sample.component.ts
import { VerticalAlignment } from 'igniteui-angular';
// import { VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
...
public open(toast) {
    toast.positionSettings.verticalDirection = VerticalAlignment.Top;
    toast.open();
}
...

Overlay Settings

IgxToastComponent는 오버레이 설정을 사용하여 해당 컨테이너의 위치를 제어합니다. 기본 설정은 Custom OverlaySettings를 정의하고 이를 토스트 open() 메서드에 전달하여 변경할 수 있습니다.

public customSettings: OverlaySettings = {
    positionStrategy: new GlobalPositionStrategy(
        { 
            horizontalDirection: HorizontalAlignment.Left,
            verticalDirection: VerticalAlignment.Top
        }),
    modal: true,
    closeOnOutsideClick: true,
};

toast.open(customSettings);

사용자는 토스트가 표시될 때 DOM에 배치될 특정 콘센트를 제공할 수도 있습니다.

<igx-toast [outlet]="igxBodyOverlayOutlet"></igx-toast>
<div #igxBodyOverlayOutlet igxOverlayOutlet></div>

스타일링

토스트 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.

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

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

가장 간단한 접근 방식에 따라 toast-theme 확장하고 $shadow, $background, $text-color 및 $border-radius 매개 변수를 허용하는 새 테마를 만듭니다.

$custom-toast-theme: toast-theme(
    $background: #dedede,
    $text-color: #151515,
    $border-radius: 12px
);

Using CSS variables

마지막 단계는 사용자 정의 토스트 테마를 전달하는 것입니다.

@include css-vars($custom-toast-theme);

Using mixins

Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

:host {
    ::ng-deep {
        // Pass the custom toast theme to the `igx-toast` mixin
        @include toast($custom-toast-theme);
    }
}

Using color palettes

방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.

igx-palette 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

$white-color: #dedede;
$black-color: #151515;

$light-toast-palette: palette($primary: $white-color, $secondary: $black-color);

그런 다음 igx-color 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.

$custom-toast-theme: toast-theme(
    $background: color($light-toast-palette, "primary", 400),
    $text-color: color($light-toast-palette, "secondary", 400),
    $border-radius: 12px
);

Note

igx-color 및 igx-palette 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.

Using schemas

스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.

모든 구성 요소에 대해 제공되는 사전 정의된 두 스키마 중 하나(이 경우 light-toast 스키마)를 확장합니다.

//  Extending the toast schema
$light-toast-schema: extend($_light-toast,
    (
        background: (
           color: ("primary", 400)
        ),
        text-color: (
           color: ("secondary", 400)
        ),
        border-radius: 12px
    )
);

사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light 또는 dark)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.

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

// Defining toast with the global light schema
$custom-toast-theme: toast-theme(
  $palette: $light-toast-palette,
  $schema: $custom-light-schema
);

위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.

API References

Additional Resources

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