Angular 배너 구성 요소 개요
Angular Banner Component는 스낵바보다 덜 일시적이고 대화 상자보다 덜 눈에 띄는 방식으로 애플리케이션 사용자에게 눈에 띄는 메시지를 쉽게 표시하는 방법을 제공합니다. 배너는 사용자 지정 작업 버튼과 아이콘을 표시하도록 구성할 수도 있습니다.
Angular Banner Example
Getting Started with Ignite UI for Angular Banner
Ignite UI for Angular 배너 구성 요소를 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 다음 단계를 가져오는 것입니다.IgxBannerModule 당신의 app.module.ts 파일.
// app.module.ts
...
import { IgxBannerModule } from 'igniteui-angular';
// import { IgxBannerModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxBannerModule],
...
})
export class AppModule {}
또는16.0.0 독립 실행형 의존성으로 가져오IgxBannerComponent 거나, 토큰을IGX_BANNER_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.
// home.component.ts
...
import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_BANNER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-banner>
You are currently offline.
</igx-banner>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_BANNER_DIRECTIVES]
/* or imports: [IgxBannerComponent] */
})
export class HomeComponent {}
Now that you have the Ignite UI for Angular Banner module or directives imported, you can start with a basic configuration of the igx-banner component.
Using the Angular Banner Component
Show Banner
배너 컴포넌트를 표시하려면 그open() 메서드를 사용하고 버튼 클릭으로 호출하세요. 배너는 해당 요소가 페이지 템플릿에 삽입된 위치에 대해 기준으로 나타나며, 나머지 모든 콘텐츠를 이동시킵니다. 보통 최소한의 사용자 상호작용만으로도 해산되는 비침해적인 콘텐츠를 보여줍니다.
<!--banner.component.html-->
<igx-icon (click)="connectionBanner.open()">refresh</igx-icon>
...
<igx-banner #connectionBanner>
You are currently offline.
</igx-banner>
Note
The IgxBannerModule includes a default banner button Dismiss, which closes the banner.
Examples
The IgxBannerComponent allows templating of its content while still sticking as closely as possible to the material design banner guidelines.
Changing the banner message
Configuring the message displayed in the banner is easy - just change the content you are passing to the igx-banner tag. The text will show up in the specified banner area and the banner will use its default template when displaying it. Below, we will change the content of our sample banner to be a bit more descriptive:
<!--banner.component.html-->
<igx-banner #connectionBanner>
You have lost connection to the internet. This app is offline.
</igx-banner>
Adding an icon
An igx-icon can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
Note
If several igx-icon elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one igx-icon directly to the banner.
To pass an igx-icon to you banner, simply insert it in the banner's content:
<!--banner.component.html-->
<igx-banner #connectionBanner>
<igx-icon>signal_wifi_off</igx-icon>
You have lost connection to the internet. This app is offline.
</igx-banner>
If you want to use an igx-icon in your banner message, wrap it in a span tag:
<!--banner.component.html-->
<igx-banner #connectionBanner>
You have lost connection to the internet. This app is offline.
<span>
<igx-icon>signal_wifi_off</igx-icon>
</span>
</igx-banner>
Changing the banner button
The IgxBannerModule exposes a directive for templating the banner buttons - IgxBannerActionsDirective. This directive allows you to override the default banner button (Dismiss) and add user-defined custom actions.
<!--banner.component.html-->
<igx-banner #connectionBanner>
<igx-icon>signal_wifi_off</igx-icon>
You have lost connection to the internet. This app is offline.
<igx-banner-actions>
<button igxButton igxRipple (click)="connectionBanner.toggle()">Toggle Banner</button>
</igx-banner-actions>
</igx-banner>
Applying custom animations
The banner component comes with the animationSettings property that allows applying custom opening and closing animations. Developers can choose between self-defined animations, and those from our Animation suite. The default ones, used by the banner, are growVerIn for entering and growVerOut for exiting.
배너가 슬라이드 인/아웃되도록 애니메이션을 변경해 보겠습니다.
<!--banner.component.html-->
<igx-banner #connectionBanner [animationSettings]="animationSettings">
...
</igx-banner>
// banner.component.ts
import { IgxBannerComponent, slideInLeft, slideOutRight } from 'igniteui-angular'
// import { IgxBannerComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
...
export class MyBannerComponent {
...
public animationSettings = {
openAnimation: slideInLeft,
closeAnimation: slideOutRight
}
...
}
Binding to events
The banner component emits events when changing its state - opening and opened are called when the banner is shown (before and after, resp.), while closing and closed are emitted when the banner is closed. The ing events (opening, closing) are cancelable - they use the ICancelEventArgs interface and the emitted object has a cancel property. If the cancel property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel opening, the banner's open method will not finish and the banner will not be shown.
To cancel an event, bind it to the emitted object and set its cancel property to true.
<!--banner.component.html-->
<igx-banner #connectionBanner (opening)="handleOpen($event)">
...
</igx-banner>
// banner.component.ts
...
export class MyBannerComponent {
...
public handleOpen(event) {
event.cancel = true;
}
}
Note
위 변경 사항을 적용할 경우 오프닝 이벤트가 항상 취소되므로 배너가 절대 열리지 않습니다.
Advanced Example
Let's create a banner with two custom buttons - one for dismissing the notification and one for turning on the connection. We can pass custom action handlers using the igx-banner-actions selector:
<!--banner.component.html-->
<igx-banner class="offline-banner" #connectionBanner [animationSettings]="animationSettings">
<igx-icon>signal_wifi_off</igx-icon>
You have lost connection to the internet. This app is offline.
<igx-banner-actions>
<button igxButton igxRipple (click)="connectionBanner.close()">Continue Offline</button>
<button igxButton igxRipple (click)="wifiState = true">Turn On Wifi</button>
</igx-banner-actions>
</igx-banner>
Note
According to Google's Material Design guidelines, a banner should have a maximum of 2 buttons present. The IgxBannerComponent does not explicitly limit the number of elements under the igx-banner-actions tag, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines.
The dismiss option ('Continue Offline') doesn't need any further logic, so it can just call the close() method. The confirm action ('Turn On Wifi'), however, requires some additional logic, so we have to define it in the component. Then, we will create onNetworkStateChange Observable and subscribe to it. The last step is to call the refreshBanner() method on each change, which will toggle the banner depending on the wifiState.
The banner will also have a WiFi icon in the navbar. As the subscription fires on any change of the wifiState, the icon will not only toggle the banner, but change according to the state of the connection:
<!--banner.component.html-->
<igx-navbar title="Gallery">
<igx-icon (click)="wifiState = !wifiState">
{{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off' }}
</igx-icon>
</igx-navbar>
Finally, we will add a toast, displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below:
스타일링
먼저 테마 엔진에서 제공하는 기능을 사용하려면 스타일 파일에 인덱스 파일을 가져와야 합니다.
@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 banner-theme and specifying just the $banner-background. Based on this value, the $banner-message-color and $banner-illustration-color are automatically set to black or white, depending on which provides better contrast with the background.
$custom-banner-theme: banner-theme(
$banner-background: #011627,
);
Note
우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.
마지막 단계는 맞춤 배너 테마를 전달하는 것입니다.
@include css-vars($custom-banner-theme);
API Reference
사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub