Web Components Banner | Infragistics

Ignite UI for Web Components Banner 구성 요소는 스낵바보다 덜 일시적이고 대화 상자보다 덜 눈에 거슬리는 방식으로 애플리케이션 사용자에게 눈에 띄는 메시지를 쉽게 표시할 수 있는 방법을 제공합니다. 또한 메시지의 컨텍스트에 따라 수행할 작업을 나타낼 수도 있습니다.

Usage

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents

그런 다음 필요한 CSS를 IgcBannerComponent 가져오고 다음과 같이 모듈을 등록해야 합니다.

import { defineComponents, IgcBannerComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcBannerComponent);

Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

배너 구성 요소를 표시하려면 해당 show 메서드를 사용하고 버튼 클릭 시 호출합니다. 배너는 페이지 템플릿에서 요소가 삽입된 위치를 기준으로 나타나며 다른 모든 콘텐츠를 이동합니다. 일반적으로 최소한의 사용자 상호 작용을 해제해야 하는 일부 비침입 콘텐츠를 표시합니다.

<igc-button onclick="banner.show()">Show Banner</igc-button>

<igc-banner id="banner">
    You are currently offline.
</igc-banner>

[!NOTE] The IgcBannerComponent includes a default action button OK, which closes the banner.

Examples

이 IgcBannerComponent 구성 요소를 사용하면 콘텐츠를 템플릿화하면서 머티리얼 디자인 배너 지침을 최대한 가깝게 유지할 수 있습니다.

Changing the banner message

배너에 표시되는 메시지를 구성하는 것은 쉽습니다 - 태그에 전달하는 콘텐츠를 변경하기만 하면 됩니다 igc-banner. 텍스트는 지정된 배너 영역에 표시되며 배너는 표시할 때 기본 템플릿을 사용합니다. 아래에서는 샘플 배너의 내용을 좀 더 설명적으로 변경합니다.

<igc-banner id="banner">
    You have lost connection to the internet. This app is offline.
</igc-banner>

Adding an icon

배너 IgcIconComponent의 슬롯을 사용하여 배너에 표시할 수 있습니다 prefix. 아이콘은 항상 배너 메시지의 시작 부분에 배치됩니다.

[!NOTE] If several IgcIconComponent elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one IgcIconComponent directly to the banner.

배너에 전달 IgcIconComponent 하려면 다음 슬롯을 사용하십시오. prefix

<igc-banner id="banner">
    <igc-icon slot="prefix" name="signal_wifi_off"></igc-icon>
    You have lost connection to the internet. This app is offline.
</igc-banner>

배너 메시지에 사용하려면 IgcIconComponent 배너 콘텐츠에 삽입하기만 하면 됩니다.

<igc-banner id="banner">
    You have lost connection to the internet. This app is offline.
    <igc-icon name="signal_wifi_off"></igc-icon>
</igc-banner>

IgcBannerComponent 배너 단추를 템플릿화하기 위한 슬롯을 노출 actions 합니다. 이렇게 하면 기본 배너 버튼(OK)을 재정의하고 사용자 정의 사용자 지정 작업을 추가할 수 있습니다.

<igc-banner id="banner">
    <igc-icon slot="prefix" name="signal_wifi_off"></igc-icon>
    You have lost connection to the internet. This app is offline.
    <div slot="actions">
        <igc-button onclick="banner.toggle()">
            <igc-ripple></igc-ripple>
            Toggle Banner
        </igc-button>
    </div>
</igc-banner>

Binding to events

banner 구성 요소는 닫힐 때 및 igcClosed 이벤트를 내보냅니다 igcClosing. 이벤트는 igcClosing 취소 할 수 있습니다 - 인터페이스를 사용하고 CustomEvent 방출 된 객체의 cancelable 속성이 true로 설정되어 있습니다. 이벤트를 취소 igcClosing 하면 해당 종료 작업 및 이벤트가 트리거되지 않습니다 - 배너가 닫히지 않고 igcClosed 이벤트가 발생하지 않습니다.

To cancel the closing event, call the preventDefault method.

<igc-banner id="banner">
    ...
</igc-banner>

const banner = document.getElementById('banner') as IgcBannerComponent;

banner.addEventListener('igcClosing', (event) => {
  event.preventDefault();
});

[!NOTE] If the changes above are applied, the banner will never close, as the closing event is always cancelled.

Advanced Example

두 개의 사용자 지정 버튼이 있는 배너를 만들어 보겠습니다 - 하나는 알림을 해제하기 위한 것이고 다른 하나는 연결을 켜기 위한 것입니다. 슬롯을 사용하여 사용자 지정 작업 처리기를 actions 전달할 수 있습니다.

<igc-banner id="banner">
    <igc-icon slot="prefix" name="signal_wifi_off"></igc-icon>
    You have lost connection to the internet. This app is offline.
    <div slot="actions">
        <igc-button onclick="banner.hide()">
            <igc-ripple></igc-ripple>
            Continue Offline
        </igc-button>
        <igc-button id="button">
            <igc-ripple></igc-ripple>
            Turn On Wifi
        </igc-button>
    </div>
</igc-banner>

Google의 머티리얼 디자인 가이드라인에 따르면 배너에는 최대 2개의 버튼이 있어야 합니다. IgcBannerComponent 슬롯 아래의 actions 요소 수를 명시적으로 제한하지는 않지만 재질 디자인 지침을 준수하려는 경우 최대 2개를 사용하는 것이 좋습니다.

dismiss 옵션( 'Continue Offline')은 추가 논리가 필요하지 않으므로 메서드를 호출 hide 하기만 하면 됩니다. 그러나 confirm 작업( 'Turn On Wifi')에는 몇 가지 추가 논리가 필요하므로 구성 요소에서 정의해야 합니다. 그런 다음 이벤트에 대한 click 이벤트 리스너를 추가합니다. 마지막 단계는 각 변경 사항에 대해 메서드를 호출 refreshBanner() 하는 것이며, 이에 따라 wifiState 배너가 전환됩니다.

탐색 모음에는 Wi-Fi 아이콘이 있으며 해당 click 이벤트에 대한 이벤트 리스너도 추가됩니다. 각 변경에 대해 메서드가 refreshBanner() 호출되면 아이콘은 배너를 토글할 뿐만 아니라 연결 상태에 따라 변경됩니다.

<igc-navbar>
  <h1>Gallery</h1>
  <igc-icon id="icon" slot="end" name="signal_wifi_off"></igc-icon>
</igc-navbar>

<igc-banner id="banner">
    ...
    <div slot="actions">
        ...
        <igc-button id="button">
            <igc-ripple></igc-ripple>
            Turn On Wifi
        </igc-button>
    </div>
</igc-banner>

private banner: IgcBannerComponent;
private icon: IgcIconComponent;
private button: IgcButtonComponent;

private wifiState: boolean = false;

constructor() {
    this.banner = document.getElementById('banner') as IgcBannerComponent;
    this.icon = document.getElementById('icon') as IgcIconComponent;
    this.button = document.getElementById('button') as IgcButtonComponent;

    this.icon.addEventListener('click', () => this.refreshBanner());
    this.button.addEventListener('click', () => this.refreshBanner());
}

public refreshBanner() {
    if (!this.wifiState) {
        this.icon.name = 'signal_wifi_4_bar';
        this.banner.hide();
    } else {
        this.icon.name = 'signal_wifi_off';
        this.banner.show();
    }
    this.wifiState = !this.wifiState;
}

마지막으로 WiFi 상태에 대한 메시지를 표시하는 a IgcToastComponent를 추가합니다. 템플릿 배너의 결과는 아래 데모에서 볼 수 있습니다.

Styling

banner 구성 요소는 여러 CSS 부분(base, spacer, message, illustration,and content actions)을 노출하여 스타일을 완전히 제어할 수 있도록 합니다.

igc-banner::part(spacer) {
    background: #dedede;
}

igc-banner::part(illustration) {
    color: #666666;
}

igc-banner::part(content) {
    color: #151515;
}

Web Components Banner 개요

Ignite UI for Web Components Banner Example

Usage

Show Banner

Examples

Changing the banner message

Adding an icon

Changing the banner button

Binding to events

Advanced Example

Styling

API References

Additional Resources