React Banner 개요
Ignite UI for React Banner 구성 요소는 스낵바보다 덜 일시적이고 대화 상자보다 덜 눈에 거슬리는 방식으로 애플리케이션 사용자에게 눈에 띄는 메시지를 쉽게 표시할 수 있는 방법을 제공합니다. 또한 메시지의 컨텍스트에 따라 수행할 작업을 나타낼 수도 있습니다.
Ignite UI for React Banner Example
Usage
먼저 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.
npm install igniteui-react
그런 다음 필요한 CSS를 IgrBanner 가져오고 다음과 같이 모듈을 등록해야 합니다.
import { IgrBannerModule, IgrBanner } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrBannerModule.register();
Ignite UI for React 에 대한 전체 소개는 시작하기 항목을 참조하세요.
Show Banner
배너 구성 요소를 표시하려면 해당 show 메서드를 사용하고 버튼 클릭 시 호출합니다. 배너는 페이지 템플릿에서 요소가 삽입된 위치를 기준으로 나타나며 다른 모든 콘텐츠를 이동합니다. 일반적으로 최소한의 사용자 상호 작용을 해제해야 하는 일부 비침입 콘텐츠를 표시합니다.
<IgrButton clicked={() => bannerRef.current.show()}>
<span>Show Banner</span>
</IgrButton>
<IgrBanner ref={bannerRef}>
<span key="message">You are currently offline.</span>
</IgrBanner>
[!NOTE] The
IgrBannerincludes a default action buttonOK, which closes the banner.
Examples
이 IgrBanner 구성 요소를 사용하면 콘텐츠를 템플릿화하면서 머티리얼 디자인 배너 지침을 최대한 가깝게 유지할 수 있습니다.
Changing the banner message
배너에 표시되는 메시지를 구성하는 것은 쉽습니다 - 태그에 전달하는 콘텐츠를 변경하기만 하면 됩니다 IgrBanner. 텍스트는 지정된 배너 영역에 표시되며 배너는 표시할 때 기본 템플릿을 사용합니다. 아래에서는 샘플 배너의 내용을 좀 더 설명적으로 변경합니다.
<IgrBanner ref={bannerRef}>
<span key="message">You have lost connection to the internet. This app is offline.</span>
</IgrBanner>
Adding an icon
배너 IgrIcon의 슬롯을 사용하여 배너에 표시할 수 있습니다 prefix. 아이콘은 항상 배너 메시지의 시작 부분에 배치됩니다.
[!NOTE] If several
IgrIconelements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only oneIgrIcondirectly to the banner.
배너에 전달 IgrIcon 하려면 다음 슬롯을 사용하십시오. prefix
<IgrBanner ref={bannerRef}>
<IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
<span key="message">You have lost connection to the internet. This app is offline.</span>
</IgrBanner>
배너 메시지에 사용하려면 IgrIcon 배너 콘텐츠에 삽입하기만 하면 됩니다.
<IgrBanner ref={bannerRef}>
<span key="message">You have lost connection to the internet. This app is offline.</span>
<IgrIcon key="icon" name="signal_wifi_off"></IgrIcon>
</IgrBanner>
Changing the banner button
IgrBanner 배너 단추를 템플릿화하기 위한 슬롯을 노출 actions 합니다. 이렇게 하면 기본 배너 버튼(OK)을 재정의하고 사용자 정의 사용자 지정 작업을 추가할 수 있습니다.
<IgrBanner ref={bannerRef}>
<IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
<span key="message">You have lost connection to the internet. This app is offline.</span>
<div key="actions" slot="actions">
<IgrButton key="button" variant="flat" clicked={() => bannerRef.current.toggle()}>
<IgrRipple key="ripple" />
<span key="action-text">Toggle Banner</span>
</IgrButton>
</div>
</IgrBanner>
Binding to events
banner 구성 요소는 닫힐 때 및 igcClosed 이벤트를 내보냅니다 igcClosing. 이벤트는 igcClosing 취소 할 수 있습니다 - 인터페이스를 사용하고 CustomEvent 방출 된 객체의 cancelable 속성이 true로 설정되어 있습니다. 이벤트를 취소 igcClosing 하면 해당 종료 작업 및 이벤트가 트리거되지 않습니다 - 배너가 닫히지 않고 igcClosed 이벤트가 발생하지 않습니다.
To cancel the closing event, call the preventDefault method.
<IgrBanner ref={bannerRef}>
...
</IgrBanner>
const bannerRef = useRef<IgrBanner>(null);
useEffect(() => {
bannerRef.current.nativeElement.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 전달할 수 있습니다.
<IgrBanner ref={bannerRef}>
<IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
<span key="message">You have lost connection to the internet. This app is offline.</span>
<div key="actions" slot="actions">
<IgrButton key="button-offline" variant="flat" clicked={() => bannerRef.current.hide()}>
<IgrRipple key="ripple-offline" />
<span key="action-offline">Continue Offline</span>
</IgrButton>
<IgrButton key="button-wifi" variant="flat" clicked={() => refreshBanner()}>
<IgrRipple key="ripple-wifi" />
<span key="action-wifi">Turn On Wifi</span>
</IgrButton>
</div>
</IgrBanner>
Google의 머티리얼 디자인 가이드라인에 따르면 배너에는 최대 2개의 버튼이 있어야 합니다.
IgrBanner슬롯 아래의actions요소 수를 명시적으로 제한하지는 않지만 재질 디자인 지침을 준수하려는 경우 최대 2개를 사용하는 것이 좋습니다.
dismiss 옵션(Continue Offline)은 추가 논리가 필요하지 않으므로 메서드를 호출 hide 하기만 하면 됩니다. 그러나 확인 작업(Wifi 켜기)에는 몇 가지 추가 논리가 필요하므로 구성 요소에서 정의해야 합니다. 그런 다음 이벤트에 대한 click 이벤트 리스너를 추가합니다. 마지막 단계는 각 변경 사항에 대해 메서드를 호출 refreshBanner() 하는 것이며, 이에 따라 wifiState 배너가 전환됩니다.
탐색 모음에는 Wi-Fi 아이콘이 있으며 해당 click 이벤트에 대한 이벤트 리스너도 추가됩니다. 각 변경에 대해 메서드가 refreshBanner() 호출되면 아이콘은 배너를 토글할 뿐만 아니라 연결 상태에 따라 변경됩니다.
<IgrNavbar>
<h1 key="header">Gallery</h1>
<IgrIcon ref={iconRef} key="icon" name="signal_wifi_off" slot="end" onClick={() => refreshBanner()}></IgrIcon>
</IgrNavbar>
<IgrBanner ref={bannerRef}>
...
<div key="actions" slot="actions">
...
<IgrButton key="button-wifi" variant="flat" clicked={() => refreshBanner()}>
<IgrRipple key="ripple-wifi" />
<span key="action-wifi">Turn On Wifi</span>
</IgrButton>
</div>
</IgrBanner>
const bannerRef = useRef<IgrBanner>(null);
const iconRef = useRef<IgrIcon>(null);
const [wifiState, setWifiState] = useState(false);
function refreshBanner() {
if (!wifiState) {
iconRef.current.name = 'signal_wifi_4_bar';
bannerRef.current.hide();
} else {
iconRef.current.name = 'signal_wifi_off';
bannerRef.current.show();
}
setWifiState(current => !current);
}
마지막으로 WiFi 상태에 대한 메시지를 표시하는 a IgrToast를 추가합니다. 템플릿 배너의 결과는 아래 데모에서 볼 수 있습니다.
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;
}