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
igx-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
배너 구성 요소는 상태가 변경될 때 이벤트를 내보냅니다. 배너가 표시될 때(각각 전후) opening 및 opened이 호출되고, 배너가 닫힐 때 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
Google의 Material Design 가이드라인에 따르면 배너에는 최대 2개의 버튼이 있어야 합니다. IgxBannerComponent는 igx-banner-actions 태그 아래의 요소 수를 명시적으로 제한하지 않지만 머티리얼 디자인 지침을 준수하려면 최대 2개까지 사용하는 것이 좋습니다.
해제 옵션( 'Continue Offline')에는 추가 논리가 필요하지 않으므로 close() 메서드만 호출하면 됩니다. 그러나 확인 작업( 'Turn On Wifi')에는 몇 가지 추가 로직이 필요하므로 구성 요소에서 이를 정의해야 합니다. 그런 다음 onNetworkStateChange Observable을 생성하고 이를 구독합니다. 마지막 단계는 각 변경 사항에 대해 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 상태에 대한 메시지를 표시하는 toast 추가하겠습니다. 템플릿 기반 배너의 결과는 아래 데모에서 볼 수 있습니다.
스타일링
먼저 테마 엔진에서 제공하는 기능을 사용하려면 스타일 파일에 인덱스 파일을 가져와야 합니다.
@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-message-color, $banner-background 및 $banner-illustration-color 매개변수를 허용하는 새 테마를 만듭니다.
$custom-banner-theme: banner-theme(
$banner-message-color: #151515,
$banner-background: #dedede,
$banner-illustration-color: #666666
);
Using CSS variables
마지막 단계는 맞춤 배너 테마를 전달하는 것입니다.
@include css-vars($custom-banner-theme);
Using mixins
Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.
구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.
:host {
::ng-deep {
// Pass the custom banner theme to the `igx-banner` mixin
@include banner($custom-banner-theme);
}
}
Using color palettes
방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.
igx-palette 함수는 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.
$white-color: #dedede;
$black-color: #151515;
$light-banner-palette: palette($primary: $white-color, $secondary: $black-color);
그런 다음 igx-color 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.
$custom-banner-theme: banner-theme(
$banner-message-color: color($light-banner-palette, "secondary", 400),
$banner-background: color($light-banner-palette, "primary", 400),
$banner-illustration-color: color($light-banner-palette, "secondary", 100)
);
Note
igx-color 및 igx-palette 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.
Using schemas
schemas의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 모든 구성 요소에 대해 제공되는 사전 정의된 두 스키마 중 하나(이 경우에는 light-banner 스키마)를 확장합니다.
// Extending the banner schema
$light-toast-schema: extend($_light-toast,
(
banner-message-color: (
color: ("secondary", 400)
),
banner-background: (
color: ("primary", 400)
),
banner-illustration-color: (
color: ("secondary", 100)
)
)
);
// Defining banner with the global light schema
$custom-banner-theme: banner-theme(
$palette: $light-banner-palette,
$schema: $light-toast-schema
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
API Reference
사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub