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에 대한 전체 소개는 시작 항목을 참조하십시오.
The next step is to import the IgxSnackbarModule in your app.module.ts file.
// app.module.ts
...
import { IgxSnackbarModule } from 'igniteui-angular';
// import { IgxSnackbarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxSnackbarModule],
...
})
export class AppModule {}
또는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 {}
Now that you have the Ignite UI for Angular Snackbar module or component imported, you can start using the igx-snackbar component.
Using the Angular Snackbar
Show Snackbar
In order to display the snackbar component, use its open() method and call it on a button click.
<!--sample.component.html-->
<button igxButton="contained" (click)="snackbar.open()">Delete Message</button>
<div>
<igx-snackbar #snackbar>Message deleted</igx-snackbar>
</div>
If the sample is configured properly, you should see the demo sample. A snackbar appears displaying a text message when the button is clicked.
As you can see in the code snippet above, one way to set the massage displayed in the snackbar is to use the content projection. But if you need to switch the value programmatically based on some custom logic you can just pass the value as a parameter to the open() method.
<!--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
Once opened, the snackbar disappears after a period specified by the displayTime input which is set initially to 4000 milliseconds. This behavior is enabled by default but you can change it by setting autoHide to false. In this way, the snackbar will remain visible. Using the snackbar close() method, you can close the component in the code.
<!--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();
}
If the sample is configured properly, the first snackbar appears when the button is clicked, showing both the message and action button. The auto-hide feature is disabled and the snackbar disappears on 'CLOSE' button click. Another snackbar passes a different message through the open() method and hides it when the display time expires. The third component passes a message as a param to the open() method and adds an icon using content projection.
Display Time
Use displayTime and set it to an interval in milliseconds to configure how long the snackbar component is visible. By default, as we said, it's initially set to 4000 milliseconds.
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';
// 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
Use positionSettings property to configure where the snackbar appears. By default, it is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position.
<!--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';
// 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();
}
...
스타일링
스낵바 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the snackbar-theme and accepts the $text-color, $background, $button-color and the $border-radius parameters.
$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
API References
In this article we learned how to use and configure the IgxSnackbarComponent. For more details in regards its API, take a look at the links below:
Styles:
Additional Resources
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)
GitHub