Angular Toast 구성 요소 개요

Ignite UI for Angular 자동 숨김, 비대화형이며 사용자가 해제할 수 없는 정보 및 경고 메시지를 제공합니다. 알림은 페이지 하단, 중간 또는 상단에 표시할 수 있습니다.

Angular 토스트 예

EXAMPLE

TS

HTML

SCSS

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

@Component({
    selector: 'app-toast-sample-2',
    styleUrls: ['./toast-sample-2.component.scss'],
    templateUrl: './toast-sample-2.component.html',
    imports: [IgxButtonDirective, IgxToastComponent]
})

export class ToastSample2Component { }
tsコピー

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

button {
    margin: 1.2% 0;
}
scssコピー

Edit in: CodesandboxStackBlitz

Ignite UI for Angular Toast 시작하기

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

ng add igniteui-angular
cmd

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

또는 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;
}
typescript

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

Angular 토스트 사용하기

토스트 보여주기

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

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

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

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

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

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

​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);
}
typescript

예

숨기기/자동 숨기기

일단 열리면 토스트는 처음에 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>
html

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

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxButtonDirective, IgxToastComponent, IgxIconComponent } from 'igniteui-angular';

@Component({
    selector: 'app-toast-sample-3',
    styleUrls: ['./toast-sample-3.component.scss'],
    templateUrl: './toast-sample-3.component.html',
    imports: [IgxButtonDirective, IgxToastComponent, IgxIconComponent]
})

export class ToastSample3Component { }
tsコピー

<div class='columnWrapper'>
    <span>
        <h6>Toast that uses content projection</h6>
        <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>
    </span>
    <span>
        <h6>Toast which dynamically changes the message text</h6>
        <button igxButton="outlined" (click)="toast1.open('Hi! This is info message.')">Info Message</button>
        <button igxButton="outlined" (click)="toast1.open('Hi! This is success message.')">Success Message</button>
        <button igxButton="outlined" (click)="toast1.open('Hi! This is warning message.')">Warning Message</button>
        <button igxButton="outlined" (click)="toast1.open('Hi! This is error message.')">Error Message</button>
        <igx-toast #toast1 [autoHide]="true"></igx-toast>
    </span>
    <span>
        <h6>Toast that uses content projection and dynamically changes the message text</h6>
        <button igxButton="contained" (click)="toast2.open('You have one new message.')">Show Toast</button>
        <button igxButton="contained" (click)="toast2.open('Your massage has been successfully sent.')">Show Toast with another message</button>
        <igx-toast #toast2 [autoHide]="true">
            <igx-icon>mail</igx-icon>
        </igx-toast>
    </span>
</div>
htmlコピー

.columnWrapper {
    display: flex;
    flex-flow: row;
    padding-top: 30px;
}
.columnWrapper span {
    min-width: 250px;
    flex: 1 0 0px;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
}

button {
    margin: 15px 10px 10px 0;
}
scssコピー

Edit in: CodesandboxStackBlitz

표시 시간

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

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

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

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

포지셔닝

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

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

// 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();
}
...
typescript

EXAMPLE

TS

HTML

import { Component } from '@angular/core';
import { VerticalAlignment, IgxButtonDirective, IgxToastComponent } from 'igniteui-angular';
@Component({
    selector: 'app-toast-sample-5',
    styleUrls: ['./toast-sample-5.component.scss'],
    templateUrl: './toast-sample-5.component.html',
    imports: [IgxButtonDirective, IgxToastComponent]
})

export class ToastSample5Component {
  public open(toast) {
    toast.positionSettings.verticalDirection = VerticalAlignment.Top;
    toast.open();
  }
}
tsコピー

<div>
    <button igxButton="contained" (click)="open(toast)">Show notification on top</button>
    <igx-toast #toast>Notification displayed</igx-toast>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

스타일링

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

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

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

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

$custom-toast-theme: toast-theme(
  $text-color: #ffcd0f,
  $background: #292826,
  $border-radius: 12px
);
scss

우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color 함수를 사용하여 palette 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes.

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

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

데모

EXAMPLE

TS

HTML

SCSS

import { Component, ElementRef, inject } from '@angular/core';
import { IgxToastComponent, VerticalAlignment, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';

@Component({
    selector: 'app-toast-style',
    styleUrls: ['./toast-style.component.scss'],
    templateUrl: './toast-style.component.html',
    imports: [IgxButtonDirective, IgxRippleDirective, IgxToastComponent]
})
export class ToastStyleComponent {
    elem = inject(ElementRef);

    public toast: IgxToastComponent;
    public position = VerticalAlignment;

    openToast(toast: IgxToastComponent, pos: VerticalAlignment) {
        toast.positionSettings.verticalDirection = pos;
        toast.open();
    }
}

tsコピー

<div class="sample-wrapper">
    <section class="sample-content">
        <article class="sample-column">
            <h5 class="title">Bottom Position</h5>
            <div class="preview bottom"></div>
            <div class="btn-group">
                <button igxButton="contained" igxRipple="white" (click)="openToast(toast, position.Bottom)" [disabled]="toast.isVisible">Show Toast</button>
                <button igxButton="contained" igxRipple="white" (click)="toast.close()" [disabled]="!toast.isVisible">Hide Toast</button>
            </div>
        </article>
        <article class="sample-column">
            <h5 class="title">Middle Position</h5>
            <div class="preview middle"></div>
            <div class="btn-group">
                <button igxButton="contained" igxRipple="white" (click)="openToast(toast, position.Middle)" [disabled]="toast.isVisible">Show Toast</button>
                <button igxButton="contained" igxRipple="white" (click)="toast.close()" [disabled]="!toast.isVisible">Hide Toast</button>
            </div>
        </article>
        <article class="sample-column">
            <h5 class="title"> Top Position</h5>
            <div class="preview top"></div>
            <div class="btn-group">
                <button igxButton="contained" igxRipple="white" (click)="openToast(toast, position.Top)" [disabled]="toast.isVisible">Show Toast</button>
                <button igxButton="contained" igxRipple="white" (click)="toast.close()" [disabled]="!toast.isVisible">Hide Toast</button>
            </div>
        </article>
    </section>

    <igx-toast #toast [autoHide]="false" [outlet]="elem">This message will self-destruct in 4 seconds.</igx-toast>
</div>
htmlコピー

@use "layout.scss";
@use "igniteui-angular/theming" as *;

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

@include css-vars($custom-toast-theme);
scssコピー

Edit in: CodesandboxStackBlitz

API 참조

• IgxToast구성요소
• IgxToast컴포넌트 스타일

추가 리소스

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

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular