Blazor Banner Overview
O componente Banner Ignite UI for Blazor fornece uma maneira de exibir facilmente uma mensagem proeminente para os usuários do aplicativo de uma maneira menos transitória do que uma lanchonete e menos intrusiva do que uma caixa de diálogo. Ele também pode indicar ações a serem executadas com base no contexto da mensagem.
Ignite UI for Blazor Banner Example
Usage
Antes de usar o IgbBanner, você precisa registrá-lo da seguinte forma:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule));
Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao IgbBanner componente. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto de Assembly da Web do Blazor ou no arquivo Pages/_Host.cshtml em um projeto do Blazor Server:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Para uma introdução completa à Ignite UI for Blazor, leia o tópico Introdução.
Show Banner
Para exibir o componente de banner, use seu Show método e chame-o com um clique de botão. O banner aparece em relação ao local onde o elemento foi inserido no modelo de página, movendo todo o outro conteúdo. Normalmente, ele mostra algum conteúdo não intrusivo que requer interação mínima do usuário para ser descartado.
<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
O IgbBanner componente permite a modelagem de seu conteúdo enquanto ainda segue o mais próximo possível das diretrizes de banner do Material Design.
Changing the banner message
Configurar a mensagem exibida no banner é fácil - basta alterar o conteúdo que você está passando para a IgbBanner tag. O texto aparecerá na área de banner especificada e o banner usará seu modelo padrão ao exibi-lo. Abaixo, vamos mudar o conteúdo do nosso banner de amostra para ser um pouco mais descritivo:
<IgbBanner @ref="bannerRef">
You have lost connection to the internet. This app is offline.
</IgbBanner>
Adding an icon
Um IgbIcon pode ser exibido no banner usando o slot do prefix banner. O ícone sempre será posicionado no início da mensagem do banner.
[!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.
Para passar um IgbIcon para o seu banner, use o prefix slot:
<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>
Se você quiser usar um IgbIcon em sua mensagem de banner, basta inseri-lo no conteúdo do banner:
<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
O IgbBanner expõe o actions slot para modelar os botões do banner. Isso permite que você substitua o botão de banner padrão (OK) e adicione ações personalizadas definidas pelo usuário.
<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
O componente banner emite os igcClosing eventos and igcClosed ao ser fechado. O igcClosing evento é cancelável - ele usa a CustomEvent interface e o objeto emitido tem sua cancelable propriedade definida como true. Se cancelarmos o igcClosing evento, a ação final e o evento correspondentes não serão acionados - o banner não será fechado e o igcClosed evento não será emitido.
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
Vamos criar um banner com dois botões personalizados - um para descartar a notificação e outro para ativar a conexão. Podemos passar manipuladores de ação personalizados usando o actions slot:
<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();
}
}
De acordo com as diretrizes de Material Design do Google, um banner deve ter no máximo 2 botões presentes. O
IgbBannernão limita explicitamente o número de elementos sob oactionsslot, mas é altamente recomendável usar até 2 se você quiser aderir às diretrizes de design de material.
A opção de dispensar (Continuar offline) não precisa de mais lógica, portanto, pode apenas chamar o Hide método. A ação de confirmação (Ativar Wifi), no entanto, requer alguma lógica adicional, então temos que defini-la no componente. Em seguida, adicionaremos um ouvinte de evento para o click evento. A última etapa é chamar o refreshBanner() método em cada alteração, o que alternará o banner dependendo do wifiState.
A barra de navegação terá um ícone Wifi e adicionaremos um ouvinte de evento para seu click evento também. À medida que o refreshBanner() método é chamado em cada alteração, o ícone não apenas alternará o banner, mas mudará de acordo com o estado da conexão:
<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;
}
}
Por fim, adicionaremos um IgbToast, exibindo uma mensagem sobre o estado do WiFi. Os resultados do banner modelo podem ser vistos na demonstração abaixo:
Styling
O IgbBanner componente expõe várias partes CSS que oferecem controle total sobre seu estilo:
| Nome | Descrição |
|---|---|
base |
O wrapper base do componente de banner. |
spacer |
O invólucro interno que define o espaço ao redor do banner. |
message |
A parte que contém o texto e a ilustração. |
illustration |
A parte que contém o ícone/ilustração do banner. |
content |
A parte que contém o conteúdo do texto do banner. |
actions |
A parte que contém os botões de ação do banner. |
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);
}