Blazor Banner Overview
Ignite UI for Blazor Banner 구성 요소는 스낵바보다 덜 일시적이고 대화 상자보다 덜 눈에 거슬리는 방식으로 애플리케이션 사용자에게 눈에 띄는 메시지를 쉽게 표시할 수 있는 방법을 제공합니다. 또한 메시지의 컨텍스트에 따라 수행할 작업을 나타낼 수도 있습니다.
Ignite UI for Blazor Banner Example
Usage
사용하기 전에 다음과 같이 등록해야 합니다. IgbBanner
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule));
또한 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다 IgbBanner. Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor 서버 프로젝트의 Pages/_Host.cshtml 파일에 다음을 배치해야 합니다.
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Ignite UI for Blazor UI에 대한 전체 소개는 시작 항목을 참조하세요.
Show Banner
배너 구성 요소를 표시하려면 해당 Show 메서드를 사용하고 버튼 클릭 시 호출합니다. 배너는 페이지 템플릿에서 요소가 삽입된 위치를 기준으로 나타나며 다른 모든 콘텐츠를 이동합니다. 일반적으로 최소한의 사용자 상호 작용을 해제해야 하는 일부 비침입 콘텐츠를 표시합니다.
<IgbButton @onclick="ShowBanner">Show Banner</IgbButton>
<IgbBanner @ref="bannerRef">
You are currently offline.
</IgbBanner>
@code {
private IgbBanner bannerRef;
private void ShowBanner()
{
this.bannerRef.ShowAsync();
}
}
[!NOTE] The
IgbBannerincludes a default action buttonOK, which closes the banner.
Examples
이 IgbBanner 구성 요소를 사용하면 콘텐츠를 템플릿화하면서 머티리얼 디자인 배너 지침을 최대한 가깝게 유지할 수 있습니다.
Changing the banner message
배너에 표시되는 메시지를 구성하는 것은 쉽습니다 - 태그에 전달하는 콘텐츠를 변경하기만 하면 됩니다 IgbBanner. 텍스트는 지정된 배너 영역에 표시되며 배너는 표시할 때 기본 템플릿을 사용합니다. 아래에서는 샘플 배너의 내용을 좀 더 설명적으로 변경합니다.
<IgbBanner @ref="bannerRef">
You have lost connection to the internet. This app is offline.
</IgbBanner>
Adding an icon
배너 IgbIcon의 슬롯을 사용하여 배너에 표시할 수 있습니다 prefix. 아이콘은 항상 배너 메시지의 시작 부분에 배치됩니다.
[!NOTE] If several
IgbIconelements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only oneIgbIcondirectly to the banner.
배너에 전달 IgbIcon 하려면 다음 슬롯을 사용하십시오. prefix
<IgbBanner @ref="bannerRef">
<IgbIcon slot="prefix" IconName="signal_wifi_off" Collection="material"></IgbIcon>
You have lost connection to the internet. This app is offline.
</IgbBanner>
배너 메시지에 사용하려면 IgbIcon 배너 콘텐츠에 삽입하기만 하면 됩니다.
<IgbBanner @ref="bannerRef">
You have lost connection to the internet. This app is offline.
<IgbIcon IconName="signal_wifi_off" Collection="material"></IgbIcon>
</IgbBanner>
Changing the banner button
IgbBanner 배너 단추를 템플릿화하기 위한 슬롯을 노출 actions 합니다. 이렇게 하면 기본 배너 버튼(OK)을 재정의하고 사용자 정의 사용자 지정 작업을 추가할 수 있습니다.
<IgbBanner @ref="bannerRef">
<IgbIcon slot="prefix" IconName="signal_wifi_off" Collection="material"></IgbIcon>
You have lost connection to the internet. This app is offline.
<div slot="actions">
<IgbButton Variant="ButtonVariant.Flat" @onclick="OnButtonClick">
Toggle Banner
<IgbRipple />
</IgbButton>
</div>
</IgbBanner>
@code {
private IgbBanner bannerRef;
private void OnButtonClick()
{
this.bannerRef.ToggleAsync();
}
}
Binding to events
banner 구성 요소는 닫힐 때 및 igcClosed 이벤트를 내보냅니다 igcClosing. 이벤트는 igcClosing 취소 할 수 있습니다 - 인터페이스를 사용하고 CustomEvent 방출 된 객체의 cancelable 속성이 true로 설정되어 있습니다. 이벤트를 취소 igcClosing 하면 해당 종료 작업 및 이벤트가 트리거되지 않습니다 - 배너가 닫히지 않고 igcClosed 이벤트가 발생하지 않습니다.
To cancel the closing event, call the preventDefault method.
<IgbBanner id="banner">
...
</IgbBanner>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("handleClosing");
}
}
}
//In JavaScript:
function handleClosing() {
const banner = document.getElementById('banner');
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 전달할 수 있습니다.
<IgbBanner @ref="bannerRef">
<IgbIcon IconName="signal_wifi_off" Collection="material" slot="prefix"></IgbIcon>
You have lost connection to the internet. This app is offline.
<div slot="actions">
<IgbButton Variant="ButtonVariant.Flat" @onclick="HideBanner">
Continue Offline
<IgbRipple />
</IgbButton>
<IgbButton Variant="ButtonVariant.Flat" @onclick="RefreshBanner">
Turn On Wifi
<IgbRipple />
</IgbButton>
</div>
</IgbBanner>
@code {
private IgbBanner bannerRef;
private void HideBanner()
{
this.bannerRef.HideAsync();
}
}
Google의 머티리얼 디자인 가이드라인에 따르면 배너에는 최대 2개의 버튼이 있어야 합니다.
IgbBanner슬롯 아래의actions요소 수를 명시적으로 제한하지는 않지만 재질 디자인 지침을 준수하려는 경우 최대 2개를 사용하는 것이 좋습니다.
dismiss 옵션(Continue Offline)은 추가 논리가 필요하지 않으므로 메서드를 호출 Hide 하기만 하면 됩니다. 그러나 확인 작업(Wifi 켜기)에는 몇 가지 추가 논리가 필요하므로 구성 요소에서 정의해야 합니다. 그런 다음 이벤트에 대한 click 이벤트 리스너를 추가합니다. 마지막 단계는 각 변경 사항에 대해 메서드를 호출 refreshBanner() 하는 것이며, 이에 따라 wifiState 배너가 전환됩니다.
탐색 모음에는 Wi-Fi 아이콘이 있으며 해당 click 이벤트에 대한 이벤트 리스너도 추가됩니다. 각 변경에 대해 메서드가 refreshBanner() 호출되면 아이콘은 배너를 토글할 뿐만 아니라 연결 상태에 따라 변경됩니다.
<IgbNavbar>
<h1>Gallery</h1>
<IgbIcon @ref="iconRef" IconName="@iconName" Collection="material" slot="end" @onclick="RefreshBanner"></IgbIcon>
</IgbNavbar>
<IgbBanner @ref="bannerRef">
...
<div slot="actions">
...
<IgbButton Variant="ButtonVariant.Flat" @onclick="RefreshBanner">
Turn On Wifi
<IgbRipple />
</IgbButton>
</div>
</IgbBanner>
@code {
private IgbBanner bannerRef;
private string iconName = "signal_wifi_off";
private bool wifiState = false;
private void RefreshBanner()
{
if (!this.wifiState)
{
this.iconName = "signal_wifi_4_bar";
this.bannerRef.HideAsync();
}
else
{
this.iconName = "signal_wifi_off";
this.bannerRef.ShowAsync();
}
this.wifiState = !this.wifiState;
}
}
마지막으로 WiFi 상태에 대한 메시지를 표시하는 a IgbToast를 추가합니다. 템플릿 배너의 결과는 아래 데모에서 볼 수 있습니다.
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;
}