Ignite UI for Blazor는 스낵바보다 덜 일시적이고 대화 상자보다 덜 방해가 되는 방식으로 애플리케이션 사용자에게 눈에 띄는 메시지를 쉽게 표시하는 방법을 제공합니다. 또한 메시지의 맥락에 따라 수행할 작업을 나타낼 수도 있습니다.
Ignite UI for Blazor Banner Example
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbBannerModule),
typeof(IgbNavbarModule),
typeof(IgbCardModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule));
razor
IgbBanner 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.
Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.
Show Banner
배너 구성 요소를 표시하려면 해당 Show 메서드를 사용하고 버튼 클릭 시 호출합니다. 배너는 페이지 템플릿에서 요소가 삽입된 위치를 기준으로 나타나며 다른 모든 콘텐츠를 이동합니다. 일반적으로 최소한의 사용자 상호 작용을 해제해야 하는 일부 비침입 콘텐츠를 표시합니다.
<IgbButton @onclick="ShowBanner">Show Banner</IgbButton><IgbBanner @ref="bannerRef">
You are currently offline.
</IgbBanner>@code {private IgbBanner bannerRef;
privatevoidShowBanner()
{
this.bannerRef.ShowAsync();
}
}razor
The IgbBanner includes a default action button OK, 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>razor
Adding an icon
배너 IgbIcon의 슬롯을 사용하여 배너에 표시할 수 있습니다 prefix. 아이콘은 항상 배너 메시지의 시작 부분에 배치됩니다.
If several IgbIcon elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one IgbIcon directly to the banner.
<IgbBanner @ref="bannerRef"><IgbIconslot="prefix"IconName="signal_wifi_off"Collection="material"></IgbIcon>
You have lost connection to the internet. This app is offline.
</IgbBanner>razor
<IgbBanner @ref="bannerRef">
You have lost connection to the internet. This app is offline.
<IgbIconIconName="signal_wifi_off"Collection="material"></IgbIcon></IgbBanner>razor
Changing the banner button
IgbBanner 배너 단추를 템플릿화하기 위한 슬롯을 노출 actions 합니다. 이렇게 하면 기본 배너 버튼(OK)을 재정의하고 사용자 정의 사용자 지정 작업을 추가할 수 있습니다.
<IgbBanner @ref="bannerRef"><IgbIconslot="prefix"IconName="signal_wifi_off"Collection="material"></IgbIcon>
You have lost connection to the internet. This app is offline.
<divslot="actions"><IgbButtonVariant="ButtonVariant.Flat" @onclick="OnButtonClick">
Toggle Banner
<IgbRipple /></IgbButton></div></IgbBanner>@code {private IgbBanner bannerRef;
privatevoidOnButtonClick()
{
this.bannerRef.ToggleAsync();
}
}razor
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbBannerModule),
typeof(IgbNavbarModule),
typeof(IgbCardModule),
typeof(IgbIconModule),
typeof(IgbButtonModule),
typeof(IgbRippleModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Binding to events
banner 구성 요소는 닫힐 때 및 igcClosed 이벤트를 내보냅니다 igcClosing. 이벤트는 igcClosing 취소 할 수 있습니다 - 인터페이스를 사용하고 CustomEvent 방출 된 객체의 cancelable 속성이 true로 설정되어 있습니다. 이벤트를 취소 igcClosing 하면 해당 종료 작업 및 이벤트가 트리거되지 않습니다 - 배너가 닫히지 않고 igcClosed 이벤트가 발생하지 않습니다.
To cancel the closing event, call the preventDefault method.
If the changes above are applied, the banner will never close, as the closing event is always cancelled.
Advanced Example
두 개의 사용자 지정 버튼이 있는 배너를 만들어 보겠습니다 - 하나는 알림을 해제하기 위한 것이고 다른 하나는 연결을 켜기 위한 것입니다. 슬롯을 사용하여 사용자 지정 작업 처리기를 actions 전달할 수 있습니다.
<IgbBanner @ref="bannerRef"><IgbIconIconName="signal_wifi_off"Collection="material"slot="prefix"></IgbIcon>
You have lost connection to the internet. This app is offline.
<divslot="actions"><IgbButtonVariant="ButtonVariant.Flat" @onclick="HideBanner">
Continue Offline
<IgbRipple /></IgbButton><IgbButtonVariant="ButtonVariant.Flat" @onclick="RefreshBanner">
Turn On Wifi
<IgbRipple /></IgbButton></div></IgbBanner>@code {private IgbBanner bannerRef;
privatevoidHideBanner()
{
this.bannerRef.HideAsync();
}
}razor
Google의 머티리얼 디자인 가이드라인에 따르면 배너에는 최대 2개의 버튼이 있어야 합니다. IgbBanner 슬롯 아래의 actions 요소 수를 명시적으로 제한하지는 않지만 재질 디자인 지침을 준수하려는 경우 최대 2개를 사용하는 것이 좋습니다.
dismiss 옵션(Continue Offline)은 추가 논리가 필요하지 않으므로 메서드를 호출 Hide 하기만 하면 됩니다. 그러나 확인 작업(Wifi 켜기)에는 몇 가지 추가 논리가 필요하므로 구성 요소에서 정의해야 합니다. 그런 다음 이벤트에 대한 click 이벤트 리스너를 추가합니다. 마지막 단계는 각 변경 사항에 대해 메서드를 호출 refreshBanner() 하는 것이며, 이에 따라 wifiState 배너가 전환됩니다.
탐색 모음에는 Wi-Fi 아이콘이 있으며 해당 click 이벤트에 대한 이벤트 리스너도 추가됩니다. 각 변경에 대해 메서드가 refreshBanner() 호출되면 아이콘은 배너를 토글할 뿐만 아니라 연결 상태에 따라 변경됩니다.
마지막으로 WiFi 상태에 대한 메시지를 표시하는 a IgbToast를 추가합니다. 템플릿 배너의 결과는 아래 데모에서 볼 수 있습니다.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbBannerModule),
typeof(IgbNavbarModule),
typeof(IgbCardModule),
typeof(IgbIconModule),
typeof(IgbButtonModule),
typeof(IgbRippleModule),
typeof(IgbToastModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbBannerModule),
typeof(IgbNavbarModule),
typeof(IgbCardModule),
typeof(IgbIconModule),
typeof(IgbButtonModule),
typeof(IgbRippleModule),
typeof(IgbToastModule)
);
await builder.Build().RunAsync();
}
}
}cs
