El componente Ignite UI for Web Components Banner proporciona una manera de mostrar fácilmente un mensaje destacado a los usuarios de la aplicación de una manera que es menos transitoria que una barra de aperitivos y menos intrusiva que un cuadro de diálogo. También puede indicar las acciones que se deben realizar en función del contexto del mensaje.
<html><head><title>Banner Sample 1</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="gallery__wrapper"><divclass="gallery__content"><igc-navbar><h1>Gallery</h1><igc-iconname="refresh"slot="end"onclick="banner.show()"></igc-icon></igc-navbar><igc-bannerid="banner"class="offline-banner">
You are currently offline.
</igc-banner><igc-cardclass="gallery__item"elevated><div><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"></div></igc-card><igc-cardclass="gallery__item"elevated><div><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"></div></igc-card></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
cmd
A continuación, tendrás que importar el IgcBannerComponent CSS necesario y registrar su módulo, de la siguiente manera:
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.
Mostrar banner
Para mostrar el componente de banner, utilice su show método y llámelo con un clic de botón. El banner aparece en relación con el lugar donde se insertó el elemento en la plantilla de página, moviendo todo el resto del contenido. Por lo general, muestra contenido no intrusivo que requiere una interacción mínima del usuario para ser descartado.
<igc-buttononclick="banner.show()">Show Banner</igc-button><igc-bannerid="banner">
You are currently offline.
</igc-banner>html
El IgcBannerComponent incluye un botón de acción predeterminado OK, que cierra el banner.
Ejemplos
El IgcBannerComponent componente permite crear plantillas de su contenido sin dejar de ceñirse lo más posible a las directrices del banner de diseño de materiales.
Cambiar el mensaje del banner
Configurar el mensaje que se muestra en el banner es fácil: simplemente cambie el contenido que está pasando a la igc-banner etiqueta. El texto se mostrará en el área del banner especificada y el banner utilizará su plantilla predeterminada al mostrarlo. A continuación, cambiaremos el contenido de nuestro banner de muestra para que sea un poco más descriptivo:
<igc-bannerid="banner">
You have lost connection to the internet. This app is offline.
</igc-banner>html
Agregar un ícono
An IgcIconComponent se puede mostrar en el banner utilizando la ranura del prefix banner. El icono siempre se colocará al principio del mensaje de banner.
Si se insertan varios elementos IgcIconComponent, el banner intentará colocarlos todos al principio. Se recomienda encarecidamente pasar solo un IgcIconComponent directamente al banner.
Para pasar un IgcIconComponent a tu banner, usa la prefix ranura:
<igc-bannerid="banner"><igc-iconslot="prefix"name="signal_wifi_off"></igc-icon>
You have lost connection to the internet. This app is offline.
</igc-banner>html
Si desea utilizar un IgcIconComponent mensaje en su banner, simplemente insértelo en el contenido del banner:
<igc-bannerid="banner">
You have lost connection to the internet. This app is offline.
<igc-iconname="signal_wifi_off"></igc-icon></igc-banner>html
Cambiar el botón del banner
Expone IgcBannerComponent la actions ranura para crear plantillas de los botones de banner. Esto le permite anular el botón de banner predeterminado (OK) y agregar acciones personalizadas definidas por el usuario.
<igc-bannerid="banner"><igc-iconslot="prefix"name="signal_wifi_off"></igc-icon>
You have lost connection to the internet. This app is offline.
<divslot="actions"><igc-buttononclick="banner.toggle()"><igc-ripple></igc-ripple>
Toggle Banner
</igc-button></div></igc-banner>html
<html><head><title>Banner Sample 2</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="gallery__wrapper"><divclass="gallery__content"><igc-navbar><h1>Gallery</h1><igc-iconname="refresh"slot="end"onclick="banner.show()"></igc-icon></igc-navbar><igc-bannerid="banner"class="offline-banner"><igc-iconname="signal_wifi_off"slot="prefix"></igc-icon>
You have lost connection to the internet. This app is offline.
<divslot="actions"><igc-buttonvariant="flat"onclick="banner.toggle()"><igc-ripple></igc-ripple>
Toggle Banner
</igc-button></div></igc-banner><igc-cardclass="gallery__item"elevated><div><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"></div></igc-card><igc-cardclass="gallery__item"elevated><div><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"></div></igc-card></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Vinculación a eventos
El componente de banner emite los igcClosing eventos y igcClosed cuando se cierra. El igcClosing evento es cancelable: utiliza la CustomEvent interfaz y el objeto emitido tiene su cancelable propiedad establecida en true. Si cancelamos el evento, la acción final y el igcClosing evento correspondientes no se activarán: el banner no se cerrará y el igcClosed evento no se emitirá.
To cancel the closing event, call the preventDefault method.
Si se aplican los cambios anteriores, el banner nunca se cerrará, ya que el evento de cierre siempre se cancela.
Ejemplo avanzado
Vamos a crear un banner con dos botones personalizados: uno para descartar la notificación y otro para activar la conexión. Podemos pasar controladores de acciones personalizados usando la actions ranura:
<igc-bannerid="banner"><igc-iconslot="prefix"name="signal_wifi_off"></igc-icon>
You have lost connection to the internet. This app is offline.
<divslot="actions"><igc-buttononclick="banner.hide()"><igc-ripple></igc-ripple>
Continue Offline
</igc-button><igc-buttonid="button"><igc-ripple></igc-ripple>
Turn On Wifi
</igc-button></div></igc-banner>html
De acuerdo con las directrices de diseño de materiales de Google, un banner debe tener un máximo de 2 botones presentes. No IgcBannerComponent limita explícitamente el número de elementos debajo de la actions ranura, pero se recomienda encarecidamente usar hasta 2 si desea cumplir con las pautas de diseño de materiales.
La opción dismiss (Continuar sin conexión) no necesita más lógica, por lo que puede llamar simplemente hide al método. La acción de confirmación (Activar Wifi), sin embargo, requiere alguna lógica adicional, por lo que tenemos que definirla en el componente. Luego, agregaremos un detector de eventos para el click evento. El último paso es llamar refreshBanner() al método en cada cambio, que alternará el banner en función de la wifiState.
La barra de navegación tendrá un icono de Wifi y también agregaremos un oyente de eventos para su click evento. A medida que se llama al refreshBanner() método en cada cambio, el icono no solo alternará el banner, sino que cambiará según el estado de la conexión:
<igc-navbar><h1>Gallery</h1><igc-iconid="icon"slot="end"name="signal_wifi_off"></igc-icon></igc-navbar><igc-bannerid="banner">
...
<divslot="actions">
...
<igc-buttonid="button"><igc-ripple></igc-ripple>
Turn On Wifi
</igc-button></div></igc-banner>html
Finalmente, agregaremos un IgcToastComponent, mostrando un mensaje sobre el estado de WiFi. Los resultados del banner con plantilla se pueden ver en la demostración a continuación:
<html><head><title>Banner Advanced Sample</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="gallery__wrapper"><divclass="gallery__content"><igc-navbar><h1>Gallery</h1><igc-iconid="icon"name="signal_wifi_off"slot="end"></igc-icon></igc-navbar><igc-bannerid="banner"class="offline-banner"><igc-iconname="signal_wifi_off"slot="prefix"></igc-icon>
You have lost connection to the internet. This app is offline.
<divslot="actions"><igc-buttonvariant="flat"onclick="banner.hide()"><igc-ripple></igc-ripple>
Continue Offline
</igc-button><igc-buttonid="button"variant="flat"><igc-ripple></igc-ripple>
Turn On Wifi
</igc-button></div></igc-banner><igc-cardclass="gallery__item"elevated><div><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"></div></igc-card><igc-cardclass="gallery__item"elevated><div><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"></div></igc-card><igc-toastid="toast"position="middle"></igc-toast></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
<html><head><title>Banner Styling Sample</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="gallery__wrapper"><divclass="gallery__content"><igc-navbar><h1>Gallery</h1><igc-iconid="icon"name="signal_wifi_off"slot="end"></igc-icon></igc-navbar><igc-bannerid="banner"class="offline-banner"><igc-iconname="signal_wifi_off"slot="prefix"></igc-icon>
You have lost connection to the internet. This app is offline.
<divslot="actions"><igc-buttonvariant="flat"onclick="banner.hide()"><igc-ripple></igc-ripple>
Continue Offline
</igc-button><igc-buttonid="button"variant="flat"><igc-ripple></igc-ripple>
Turn On Wifi
</igc-button></div></igc-banner><igc-cardclass="gallery__item"elevated><div><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"></div></igc-card><igc-cardclass="gallery__item"elevated><div><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"></div></igc-card><igc-toastid="toast"position="middle"></igc-toast></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html