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/toast';
// import { IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package

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

    또는16.0.0 독립 실행형 의존성으로 가져올IgxToastComponent 수도 있습니다.

    // home.component.ts

import { IgxToastComponent } from 'igniteui-angular/toast';
import { IgxButtonDirective } from 'igniteui-angular/directives';
// 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 Toast 모듈이나 컴포넌트를 가져왔으니, 컴포넌트를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);
}

    Examples

    Hide/Auto Hide

    열리면 토스트는 다음 조건이 지정한 일정 시간 후에 사라집니다.displayTime 처음에는 4000밀리초로 설정되어 있습니다. 이 동작은 기본적으로 활성화되어 있지만, 설정을 통해 변경할 수 있습니다autoHide 받는 사람 거짓. 이렇게 하면 토스트가 계속 보이게 됩니다. 토스트 사용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>

    샘플이 제대로 설정되어 있다면, Show 버튼을 클릭하면 토스트가 나타납니다. 첫 번째 컴포넌트에서는 자동 숨기기 기능이 비활성화되어 있고, '숨기기' 버튼 클릭 시 토스트가 사라집니다. 다른 두 구성 요소에서는 다양한 메시지를 메서드를 통해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/core';
// import { VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
...
public open(toast) {
    toast.positionSettings.verticalDirection = VerticalAlignment.Top;
    toast.open();
}
...

    스타일링

    Toast Theme Property Map

    기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

    기본 속성 종속 속성 설명
    $background $text색 건배에 사용된 텍스트 색상.
    $text색 $border색 건배에 사용된 테두리 색상.

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

    @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 하고 매개변수$background​$text-color​$border-radius를 제공하는 새로운 테마를 만듭니다.

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

    우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.

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

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

    Demo

    Styling with Tailwind

    저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 토스트를 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    글로벌 스타일시트에서 Tailwind 가져오기와 함께, 원하는 테마 유틸리티를 다음과 같이 적용할 수 있습니다:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-toast​dark-toast 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    전체 부동산 목록은 IgxToast 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

    <igx-toast
  class="!light-toast ![--background:#90B69F]">
  ...
</igx-toast>
    Note

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    마지막에 토스트는 이렇게 생겨야 합니다:

    API References

    Additional Resources

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