Web Components Banner 개요

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

    Ignite UI for Web Components 배너 예시

    EXAMPLE
    TS
    HTML
    BannerStyling.css
    index.css
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    용법

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

    npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcBannerComponent);
ts

    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>
html

    IgcBannerComponent에는 배너를 닫는 기본 작업 단추 OK가 포함되어 있습니다.

    Ignite UI for Web Components | CTA 배너

    예

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

    배너 메시지 변경

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

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

    아이콘 추가

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

    여러 IgcIconComponent 요소가 삽입되면 배너는 모든 요소를 시작 부분에 배치하려고 합니다. IgcIconComponent를 하나만 배너에 직접 전달하는 것이 좋습니다.

    배너에 전달 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>
html

    배너 메시지에 사용하려면 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>
html

    배너 버튼 변경

    ​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>
html

    EXAMPLE
    TS
    HTML
    BannerStyling.css
    index.css
    Edit in:

    이벤트에 바인딩

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

    To cancel the closing event, call the preventDefault method.

    <igc-banner id="banner">
    ...
</igc-banner>
html
    const banner = document.getElementById('banner') as IgcBannerComponent;

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

    위의 변경 사항이 적용되면 종료 이벤트가 항상 취소되므로 배너가 닫히지 않습니다.

    고급 예

    두 개의 사용자 지정 버튼이 있는 배너를 만들어 보겠습니다 - 하나는 알림을 해제하기 위한 것이고 다른 하나는 연결을 켜기 위한 것입니다. 슬롯을 사용하여 사용자 지정 작업 처리기를 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>
html

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

    dismiss 옵션(Continue Offline)은 추가 논리가 필요하지 않으므로 메서드를 호출 hide 하기만 하면 됩니다. 그러나 확인 작업(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>
html
    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;
}
ts

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

    EXAMPLE
    TS
    HTML
    BannerStyling.css
    index.css
    Edit in:

    스타일링

    구성 요소는 IgcBannerComponent 스타일을 완전히 제어할 수 있는 여러 CSS 부분을 노출합니다.

    이름 설명
    base 배너 구성 요소의 기본 래퍼입니다.
    spacer 배너 주위의 공간을 설정하는 내부 래퍼입니다.
    message 텍스트와 일러스트레이션을 담고 있는 부분입니다.
    illustration 배너 아이콘/일러스트레이션을 보유하는 부분입니다.
    content 배너 텍스트 콘텐츠를 보유하는 부분입니다.
    actions 배너 작업 버튼을 보유하는 부분입니다. 
    igc-banner::part(spacer) {
  background: var(--ig-surface-600);
}

igc-banner::part(illustration) {
  color: var(--ig-surface-600-contrast);
}

igc-banner::part(content) {
  color: var(--ig-gray-900);
}
css

    EXAMPLE
    TS
    HTML
    BannerStyling.css
    index.css
    layout.css
    Edit in:

    API 참조

    추가 리소스