Angular Snackbar 구성 요소 개요

Ignite UI for Angular 단일 줄 메시지로 작업에 대한 피드백을 제공하며, 여기에는 동작이 포함될 수 있습니다. Snackbar 메시지는 다른 모든 요소 위에 나타나고 화면의 하단 중앙에 배치됩니다.

Angular Snackbar Example

Getting Started with Ignite UI for Angular Snackbar

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

ng add igniteui-angular

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

다음 단계는 다음 단계를 가져오는 것입니다.IgxSnackbarModule 당신의 app.module.ts 파일.

// app.module.ts

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

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

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

// home.component.ts

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

@Component({
    selector: 'app-home',
    template: `
    <button igxButton="contained" (click)="snackbar.open()">Delete Message</button>
    <div>
        <igx-snackbar #snackbar>Message deleted</igx-snackbar>
    </div>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxSnackbarComponent, IgxButtonDirective]
})
export class HomeComponent {}

이제 Ignite UI for Angular 스낵바 모듈이나 컴포넌트를 가져왔으니, 컴포넌트를igx-snackbar 사용할 수 있습니다.

Using the Angular Snackbar

Show Snackbar

스낵바 구성 요소를 표시하려면 그open() 메서드를 사용하고 버튼 클릭으로 호출하세요.

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

<button igxButton="contained" (click)="snackbar.open()">Delete Message</button>
<div>
    <igx-snackbar #snackbar>Message deleted</igx-snackbar>
</div>

샘플이 제대로 설정되어 있다면 데모 샘플을 볼 수 있을 거예요. 버튼을 누르면 스낵바가 나타나 텍스트 메시지가 표시됩니다. 위 코드 스니펫에서 볼 수 있듯이, 스낵바에 표시되는 마사지를 설정하는 한 가지 방법은 콘텐츠 투영을 사용하는 것입니다. 하지만 커스텀 로직을 기반으로 프로그래밍적으로 값을 바꿔야 한다면, 메서드에open() 매개변수로 값을 전달하면 됩니다.

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

<button igxButton="contained" (click)="snackbar.open('Message deleted')">Delete Message</button>
<button igxButton="contained" (click)="snackbar.open('Message deletion was not successful. Please try again')">Delete Message</button>
<div>
    <igx-snackbar #snackbar></igx-snackbar>
</div>

Hide/Auto Hide

한 번 열리면, 스낵바는 다음 조건에 따라 일정 기간 후에 사라집니다.displayTime 처음에는 4000밀리초로 설정되어 있습니다. 이 동작은 기본적으로 활성화되어 있지만, 설정으로 변경할 수 있습니다autoHide 받는 사람 거짓. 이렇게 하면 스낵바가 계속 보이게 됩니다. 스낵바 사용close() 코드에서 컴포넌트를 닫을 수 있습니다.

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

<button igxButton="contained" (click)="snackbar.open()">Send message</button>
<div>
  <igx-snackbar #snackbar [autoHide]="false" actionText="CLOSE" (clicked)="close(snackbar)">Message sent</igx-snackbar>
</div>

// sample.component.ts

public close(element) {
    element.close();
}

샘플이 제대로 설정되어 있다면, 버튼을 클릭하면 첫 번째 스낵바가 나타나 메시지 버튼과 액션 버튼 모두를 보여줍니다. 자동 숨기기 기능은 비활성화되어 있으며, '닫기' 버튼 클릭 시 스낵바가 사라집니다. 또 다른 스낵바는 다른 메시지를open() 전달해 표시 시간이 끝나면 숨깁니다. 세 번째 컴포넌트는 메서드에open() 메시지를 매개변수로 전달하고 콘텐츠 투영을 이용해 아이콘을 추가합니다.

Display Time

displayTime스낵바 구성 요소가 보이는 시간을 밀리초 단위로 설정하고 설정하세요. 기본적으로 말씀드린 대로 처음에는 4000밀리초로 설정되어 있습니다.

Customize Snackbar

메시지와 버튼보다 더 복잡한 요소를 표시하도록 스낵바의 콘텐츠를 사용자 정의할 수도 있습니다. 예를 들어, 파일을 로드하는 동안 스낵바를 표시하려는 경우 로딩 애니메이션을 해당 콘텐츠에 추가할 수 있습니다.

<!--sample.component.html-->
<button igxButton="contained" (click)="snackbar.open()">Load file</button>
<div>
  <igx-snackbar #snackbar displayTime="5000">File loading
    <svg id="dots" height="20px">
        <g id="dots" fill="#FFFFFF">
            <circle id="dot1" cx="5" cy="18" r="2"></circle>
            <circle id="dot2" cx="15" cy="18" r="2"></circle>
            <circle id="dot3" cx="25" cy="18" r="2"></circle>
        </g>
    </svg>
  </igx-snackbar>
</div>

//sample.component.scss
#dots #dot1 {
    animation: load 1s infinite;
}

#dots #dot2 {
    animation: load 1s infinite;
    animation-delay: 0.2s;
}

#dots #dot3 {
    animation: load 1s infinite;
    animation-delay: 0.4s;
}

@keyframes load {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}

결과적으로 스낵바에 메시지와 3개의 로딩 점이 나타납니다.

Snackbar in list

모든 주요 스낵바 기능을 다루면 이 구성 요소를 보다 흥미로운 시나리오에 통합할 수 있습니다. 스낵바를 사용하여 알림을 제공하고 작업을 되돌리는 기능을 제공할 수 있습니다.

삭제할 수 있는 연락처 목록을 만들어 보겠습니다. 항목이 삭제되면 메시지와 작업 실행 취소 버튼이 포함된 스낵바가 표시됩니다.

<!--sample.component.html-->
<igx-list>
    <igx-list-item [isHeader]="true">Contacts</igx-list-item>

    <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item" *ngFor="let item of navItems">
        <div class="item-container">
            <div class="contact">
                <igx-avatar [src]="item.avatar" shape="circle"></igx-avatar>
                <div class="contact__info">
                    <span class="name">{{item.text}}</span>
                </div>
            </div>
            <span igxIconButton="flat" igxRipple igxRippleCentered="true" (click)="delete(item)">
                <igx-icon [style.color]="'#ff5252'">delete</igx-icon>
            </span>
        </div>

    </igx-list-item>

    <igx-snackbar actionText="Undo" (clicked)="restore()">Contact deleted</igx-snackbar>
</igx-list>

//sample.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
// import { IgxSnackbarComponent } from '@infragistics/igniteui-angular'; for licensed package
...
@ViewChild(IgxSnackbarComponent)
public snackbar: IgxSnackbarComponent;
public navItems: any[];
public deletedItems = [];

constructor() { }

public ngOnInit() {
    this.navItems = [
        { avatar: 'assets/images/avatar/2.jpg', text: 'Richard Mahoney'},
        { avatar: 'assets/images/avatar/4.jpg', text: 'Lisa Landers' },
        { avatar: 'assets/images/avatar/14.jpg', text: 'Marianne Taylor' },
        { avatar: 'assets/images/avatar/17.jpg', text: 'Ward Riley' }
    ];
}

public delete(item) {
    this.deletedItems.push([item, this.navItems.indexOf(item)]);
    this.navItems.splice(this.navItems.indexOf(item), 1);
    this.snackbar.open();
}

public restore() {
    const [item, index] = this.deletedItems.pop();
    this.navItems.splice(index, 0, item);
    this.snackbar.close();
}

Positioning

속성 설정positionSettings으로 스낵바가 나타나는 위치를 설정하세요. 기본적으로 페이지 하단에 표시됩니다. 아래 샘플에서는 알림을 상단 위치에 표시하도록 설정했습니다.

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

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

스타일링

Snackbar Theme Property Map

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

기본 속성	종속 속성	설명
$background	$text색	스낵바에 사용된 텍스트 색상
	$button색	스낵바에 사용된 단추 색깔

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

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

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

가장 간단한 접근법을 따라, 우리는 를snackbar-theme 확장하고 매개변수$text-color$background$button-color를 수용하는 새로운 주제를 만듭니다.$border-radius

$dark-snackbar: snackbar-theme(
  $text-color: #ffcd0f,
  $background: #292826,
  $button-color: #ffcd0f,
  $border-radius: 12px
);

Note

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

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

@include css-vars($dark-snackbar);

Demo

Styling with Tailwind

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

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

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

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

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

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

스 낵바 테마에서 전체 숙소 목록을 확인하실 수 있습니다. 문법은 다음과 같습니다:

<igx-snackbar
  class="!light-snackbar ![--background:#7B9E89]
  ![--button-color:#DD0D4B]">
  ...
</igx-snackbar>

Note

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

마지막에 스낵바는 이렇게 보여야 합니다:

API References

이 글에서는 사용IgxSnackbarComponent 법과 설정 방법을 배웠습니다. API에 관한 자세한 내용은 아래 링크를 참고하세요:

IgxSnackbarComponent

Styles:

IgxSnackbarComponent Styles

Additional Resources

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