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 {}
이제 Ignite UI for Angular 배너 모듈이나 디렉티브를 가져왔으니, 컴포넌트igx-banner의 기본 구성을 시작할 수 있습니다.
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
IgxBannerModule기본 배너 버튼Dismiss이 포함되어 있어 배너를 닫습니다.
Examples
이 기능은IgxBannerComponent 콘텐츠 템플릿을 허용하면서도 재질 디자인 배너 지침을 최대한 준수할 수 있습니다.
Changing the banner message
배너에 표시되는 메시지 설정은 간단합니다 - 태그에igx-banner 전달하는 내용을 바꾸기만 하면 됩니다. 텍스트는 지정된 배너 영역에 나타나고, 배너는 기본 템플릿을 사용해 표시됩니다. 아래에서 샘플 배너의 내용을 좀 더 설명적으로 변경할 예정입니다:
<!--banner.component.html-->
<igx-banner #connectionBanner>
You have lost connection to the internet. This app is offline.
</igx-banner>
Adding an icon
anigx-icon은 배너의 콘텐츠에 전달하여 배너에 표시할 수 있습니다. 아이콘은 항상 배너 메시지 시작 부분에 위치합니다.
Note
만약 여러igx-icon 요소가 배너의 직계 후손으로 삽입되면, 배너는 모두 처음에 배치하려고 합니다. 한 명igx-icon만 직접 배너로 전달하는 것이 강력히 권장됩니다.
배너를igx-icon 전달하려면, 배너 내용에 삽입하면 됩니다:
<!--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>
배너 내 메시지를 사용하고igx-icon 싶다면, 태그로span 감싸세요:
<!--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
IgxBannerModule배너 버튼 템플릿 명령이 노출됩니다 -IgxBannerActionsDirective. 이 지시문은 기본 배너 버튼(Dismiss)을 덮어쓰고 사용자 정의 맞춤 액션을 추가할 수 있게 해줍니다.
<!--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
배너 컴포넌트에는 커스텀 오프닝 및 클로징 애니메이션을 적용할 수 있는 속성이animationSettings 포함되어 있습니다. 개발자들은 스스로 정의한 애니메이션과 저희Animation suite 애니메이션 중에서 선택할 수 있습니다. 기본 배너가 사용하는 것은 진입과growVerIn 퇴출용입니다growVerOut.
배너가 슬라이드 인/아웃되도록 애니메이션을 변경해 보겠습니다.
<!--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
배너 컴포넌트는 상태를 변경할 때 이벤트openingopened를 방출하며, 배너가 표시될 때(전후, 또는 별칭) 호출되며,closing와closed는 배너가 닫힐 때 발생합니다. ing 이벤트(opening,closing)는 취소 가능하며, 인터페이스를 사용하고ICancelEventArgs 방출되는 객체는 속성을cancel 가집니다. 속성이cancel true로 설정되어 있으면 해당 종료 동작과 이벤트가 트리거되지 않습니다. 예를 들어, 취소opening 하면 배너의 메서드가open 완료되지 않고 배너가 표시되지 않습니다.
이벤트를 취소하려면 방출된 객체에 바인딩하고 그 속성을 에cancel 설정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
알림 해제용과 연결 활성화용 버튼 두 개의 커스텀 버튼이 있는 배너를 만들어봅시다. 선택기를 사용하여igx-banner-actions 맞춤형 액션 핸들러를 전달할 수 있습니다:
<!--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
구글Material Design 가이드라인에 따르면, 배너에는 최대 2개의 버튼이 있어야 합니다.IgxBannerComponent 태그 아래igx-banner-actions 요소 수를 명시적으로 제한하지는 않지만, 재질 디자인 지침을 준수하려면 최대 2개까지 사용하는 것이 강력히 권장됩니다.
dismiss 옵션('Continue Offline')은 추가 논리가 필요 없으므로 메서드를close() 호출하면 됩니다. 하지만 확인 동작('Turn On Wifi')은 추가 논리가 필요하므로 컴포넌트에서 정의해야 합니다. 그 다음, Observable을 만들고onNetworkStateChange 구독할 것입니다. 마지막 단계는 각 변경 시 메서드를refreshBanner() 호출하는 것으로, 이 메서드는 필요에wifiState 따라 배너를 토글링합니다.
배너에는 내비게이션바에 WiFi 아이콘도 표시됩니다. 구독이 어떤 변경wifiState 에도 발동될 때, 아이콘은 배너를 토글할 뿐만 아니라 연결 상태에 따라 변경됩니다:
<!--banner.component.html-->
<igx-navbar title="Gallery">
<igx-icon (click)="wifiState = !wifiState">
{{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off' }}
</igx-icon>
</igx-navbar>
마지막으로, WiFi 상태에 관한 메시지를 표시하는 atoast를 추가할 예정입니다. 템플릿 배너의 결과는 아래 데모에서 확인할 수 있습니다:
스타일링
먼저 테마 엔진에서 제공하는 기능을 사용하려면 스타일 파일에 인덱스 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 방법을 따르면, 우리는 오banner-theme 직 을 확장하고 명$banner-background 시하는 새로운 테마를 만듭니다. 이 값에 따라 그리고$banner-message-color는$banner-illustration-color 배경과의 대비가 더 좋은지에 따라 자동으로 검정 또는 흰색으로 설정됩니다.
$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