Angular Snackbar 구성 요소 개요

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

Angular Snackbar 예제

EXAMPLE

TS

HTML

SCSS

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

@Component({
    selector: 'app-snackbar-sample-1',
    styleUrls: ['./snackbar-sample-1.component.scss'],
    templateUrl: './snackbar-sample-1.component.html',
    imports: [IgxButtonDirective, IgxSnackbarComponent]
})
export class SnackbarSample1Component { }
tsコピー

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

/* .div
{
    position: absolute; 
    height: 150px; 
    width: 100%;
} */scssコピー

Edit in: CodesandboxStackBlitz

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular 스낵바 시작하기

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

ng add igniteui-angular
cmd

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

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

// app.module.ts

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

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

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

// home.component.ts

import { IgxSnackbarComponent, IgxButtonDirective } from 'igniteui-angular';
// 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 {}
typescript

이제 Ignite UI for Angular Snackbar 모듈이나 컴포넌트를 가져오면 igx-snackbar 컴포넌트를 사용할 수 있습니다.

Angular Snackbar 사용하기

스낵바 표시

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

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

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

샘플이 올바르게 구성되면 데모 샘플이 표시됩니다. 버튼을 클릭하면 문자 메시지를 표시하는 스낵바가 나타납니다. 위의 코드 조각에서 볼 수 있듯이 스낵바에 표시되는 마사지를 설정하는 한 가지 방법은 콘텐츠 프로젝션을 사용하는 것입니다. 그러나 일부 사용자 정의 논리를 기반으로 프로그래밍 방식으로 값을 전환해야 하는 경우 해당 값을 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>
html

숨기기/자동 숨기기

스낵바는 일단 열리면 처음에 4000밀리초로 설정된 displayTime 입력에 지정된 기간이 지나면 사라집니다. 이 동작은 기본적으로 활성화되어 있지만 autoHide​ ​false로 설정하여 변경할 수 있습니다. 이렇게 하면 스낵바가 계속 표시됩니다. 스낵바 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>
html

// sample.component.ts

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

샘플이 올바르게 구성된 경우 버튼을 클릭하면 첫 번째 스낵바가 나타나 메시지와 작업 버튼을 모두 표시합니다. 'CLOSE' 버튼을 클릭하면 자동 숨기기 기능이 비활성화되고 스낵바가 사라집니다. 또 다른 스낵바는 open() 메서드를 통해 다른 메시지를 전달하고 표시 시간이 만료되면 이를 숨깁니다. 세 번째 구성 요소는 메시지를 open() 메서드에 매개변수로 전달하고 콘텐츠 프로젝션을 사용하여 아이콘을 추가합니다.

EXAMPLE

TS

HTML

SCSS

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

@Component({
    selector: 'app-snackbar-sample-2',
    styleUrls: ['./snackbar-sample-2.component.scss'],
    templateUrl: './snackbar-sample-2.component.html',
    imports: [IgxButtonDirective, IgxSnackbarComponent, IgxIconComponent]
})
export class SnackbarSample2Component {
  public close(element) {
    element.close();
  }
}
tsコピー

<div class="columnWrapper">
    <span>
        <h6>Snackbar Component that uses Content projection</h6>
        <button igxButton="contained" (click)="snackbar.open()">Send message</button>
        <igx-snackbar #snackbar [autoHide]="false" actionText="CLOSE" (clicked)="close(snackbar)">Message sent</igx-snackbar>
    </span>

    <span>
        <h6>Snackbar Component which dynamically changes the message text</h6>
        <button igxButton="outlined" (click)="snackbar1.open('Hi! This is info message.')">Info Message</button>
        <button igxButton="outlined" (click)="snackbar1.open('Hi! This is success message.')">Success Message</button>
        <igx-snackbar #snackbar1 [autoHide]="true" actionText="CLOSE" (clicked)="close(snackbar1)"></igx-snackbar>
    </span>
    <span>
        <h6>Snackbar Component that uses Content Projection and dynamically changes the message text</h6>
        <button igxButton="contained" (click)="snackbar2.open('The message was not delivered successfully. Please contact our support team.')">Send message</button>
        <igx-snackbar #snackbar2 [autoHide]="false" actionText="CLOSE" (clicked)="close(snackbar2)">
            <igx-icon>support_agent</igx-icon>
        </igx-snackbar>
    </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-top: 20px;
}scssコピー

Edit in: CodesandboxStackBlitz

표시 시간

사용하고 displayTime 밀리초 단위의 간격으로 설정하여 스낵바 구성 요소가 표시되는 시간을 구성합니다. 기본적으로 앞서 말했듯이 처음에는 4000밀리초로 설정됩니다.

스낵바 사용자 정의

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

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

//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;
    }
}
scss

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

EXAMPLE

TS

HTML

SCSS

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

@Component({
    selector: 'app-snackbar-sample-5',
    styleUrls: ['./snackbar-sample-5.component.scss'],
    templateUrl: './snackbar-sample-5.component.html',
    imports: [IgxButtonDirective, IgxSnackbarComponent]
})
export class SnackbarSample5Component { }
tsコピー

<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="#999999">
            <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>
htmlコピー

#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;
    }
}

scssコピー

Edit in: CodesandboxStackBlitz

목록의 스낵바

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

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

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

//sample.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxSnackbarComponent } from 'igniteui-angular';
// 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();
}
typescript

EXAMPLE

TS

HTML

SCSS

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxSnackbarComponent, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular';


@Component({
    selector: 'app-snackbar-sample-4',
    styleUrls: ['./snackbar-sample-4.component.scss'],
    templateUrl: './snackbar-sample-4.component.html',
    imports: [IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxIconButtonDirective, IgxIconComponent, IgxSnackbarComponent]
})
export class SnackbarSample4Component implements OnInit {
  @ViewChild(IgxSnackbarComponent, { static: true })
  public snackbar: IgxSnackbarComponent;
  public navItems: any[];
  public deletedItems = [];

  constructor() { }

  public ngOnInit() {
    this.navItems = [{
      avatar: 'https://www.infragistics.com/angular-demos-lob/assets/images/avatar/2.jpg',
      text: 'Richard Mahoney'
    },
    {
      avatar: 'https://www.infragistics.com/angular-demos-lob/assets/images/avatar/4.jpg',
      text: 'Lisa Landers'
    },
    {
      avatar: 'https://www.infragistics.com/angular-demos-lob/assets/images/avatar/14.jpg',
      text: 'Marianne Taylor'
    }, {
      avatar: 'https://www.infragistics.com/angular-demos-lob/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();
  }
}
tsコピー

<div class="list-sample">
  <igx-list>
    <igx-list-item [isHeader]="true">Contacts</igx-list-item>

    @for (item of navItems; track item) {
      <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item-content">
        <igx-avatar igxListThumbnail [src]="item.avatar" shape="circle"></igx-avatar>
        <span igxListLineTitle class="name">{{item.text}}</span>
        <span igxListAction igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="delete(item)">
          <igx-icon [style.color]="'#ff5252'">delete</igx-icon>
        </span>
      </igx-list-item>
    }

    <igx-snackbar actionText="Undo" (clicked)="restore()">Contact deleted</igx-snackbar>
  </igx-list>
</div>
htmlコピー

:host {
    display: block;
    padding: 16px;
}

.list-sample {
    display: block;
    position: relative;
    overflow: hidden;
    height: 280px;
    min-width: 300px;
    box-shadow:
		0 1px 3px 0 rgba(0, 0, 0, 0.2),
		0 1px 1px 0 rgba(0, 0, 0, 0.14),
		0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
scssコピー

Edit in: CodesandboxStackBlitz

포지셔닝

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

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

// sample.component.ts
import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular';
// 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();
}
...
typescript

스타일링

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

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

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

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

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

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

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

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

데모

EXAMPLE

TS

HTML

SCSS

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

@Component({
    selector: 'app-snackbar-style',
    styleUrls: ['./snackbar-style.component.scss'],
    templateUrl: './snackbar-style.component.html',
    imports: [IgxButtonDirective, IgxSnackbarComponent]
})
export class SnackbarStyleComponent {

  constructor(public elem: ElementRef) { }

  public close(element) {
    element.close();
  }
}
tsコピー

<button igxButton="contained" (click)="snackbar.open()">Send message</button>
<div>
  <igx-snackbar #snackbar [autoHide]="false" [outlet]="elem" actionText="Close" (clicked)="close(snackbar)">Message sent</igx-snackbar>
</div>
htmlコピー

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

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

@include css-vars($dark-snackbar);
 scssコピー

Edit in: CodesandboxStackBlitz

API 참조

이 기사에서는 IgxSnackbarComponent 사용하고 구성하는 방법을 배웠습니다. API에 대한 자세한 내용은 아래 링크를 참조하세요.

• IgxSnackbarComponent

Styles:

• IgxSnackbarComponent Styles

추가 리소스

Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://ko.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)