Descripción general del componente Banner Angular

El componente Banner Angular ofrece una manera de mostrar fácilmente un mensaje destacado a los usuarios de su aplicación de una manera menos transitoria que una barra de menú y menos intrusiva que un cuadro de diálogo. El Banner también se puede configurar para mostrar botones de acción personalizados y un ícono.

Angular Banner Example

Getting Started with Ignite UI for Angular Banner

Para comenzar con el componente Ignite UI for Angular Banner, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxBannerModule en tu archivo app.module.ts.

// app.module.ts

...
import { IgxBannerModule } from 'igniteui-angular';
// import { IgxBannerModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxBannerModule],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlosIgxBannerComponent como una dependencia independiente, o usar elIGX_BANNER_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

...
import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_BANNER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-banner>
        You are currently offline.
    </igx-banner>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_BANNER_DIRECTIVES]
    /* or imports: [IgxBannerComponent] */
})
export class HomeComponent {}

Ahora que tienes importado el módulo o directivas Ignite UI for Angular Banner, puedes empezar con una configuración básica deligx-banner componente.

Using the Angular Banner Component

Show Banner

Para mostrar el componente banner, utiliza suopen() método y llámalo 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. Normalmente muestra contenido no intrusivo que requiere una interacción mínima del usuario para ser descartado.

<!--banner.component.html-->

<igx-icon (click)="connectionBanner.open()">refresh</igx-icon>
...
<igx-banner #connectionBanner>
    You are currently offline.
</igx-banner>

Note

IncluyeIgxBannerModule un botónDismiss de banner predeterminado, que cierra el banner.

Examples

PermiteIgxBannerComponent plantar su contenido sin dejar de seguir lo más fielmente posible las directrices del banner de diseño de materiales.

Changing the banner message

Configurar el mensaje que aparece en el banner es sencillo: solo tienes que cambiar el contenido que pasas a laigx-banner etiqueta. El texto aparecerá en el área del banner especificada y el banner usará su plantilla predeterminada al mostrarlo. A continuación, cambiaremos el contenido de nuestro banner de muestra para que sea un poco más descriptivo:

<!--banner.component.html-->
<igx-banner #connectionBanner>
    You have lost connection to the internet. This app is offline.
</igx-banner>

Adding an icon

Anigx-icon puede mostrarse en el banner pasándolo al contenido del banner. El icono siempre estará situado al principio del mensaje del banner.

Note

Si se insertan variosigx-icon elementos como descendientes directos del estandarte, el banner intentará posicionarlos todos al principio. Se recomienda encarecidamente pasar solo unoigx-icon directamente al estandarte.

Para pasarte unigx-icon banner, simplemente insírelo en el contenido del banner:

<!--banner.component.html-->
<igx-banner #connectionBanner>
    <igx-icon>signal_wifi_off</igx-icon>
    You have lost connection to the internet. This app is offline.
</igx-banner>

Si quieres usar unigx-icon en tu banner mensaje, envuélvelo con unaspan etiqueta:

<!--banner.component.html-->
<igx-banner #connectionBanner>
    You have lost connection to the internet. This app is offline.
    <span>
        <igx-icon>signal_wifi_off</igx-icon>
    </span>
</igx-banner>

Changing the banner button

RevelaIgxBannerModule una directiva para plantar los botones de la bandera -IgxBannerActionsDirective. Esta directiva te permite anular el botón de banner predeterminado (Dismiss) y añadir acciones personalizadas definidas por el usuario.

<!--banner.component.html-->
<igx-banner #connectionBanner>
    <igx-icon>signal_wifi_off</igx-icon>
    You have lost connection to the internet. This app is offline.
    <igx-banner-actions>
        <button igxButton igxRipple (click)="connectionBanner.toggle()">Toggle Banner</button>
    </igx-banner-actions>
</igx-banner>

Applying custom animations

El componente banner viene con laanimationSettings propiedad que permite aplicar animaciones personalizadas de apertura y cierre. Los desarrolladores pueden elegir entre animaciones autodefinidas y aquellas de nuestrasAnimation suite. Los predeterminados, usados por el banner, songrowVerIn para entrar ygrowVerOut para salir.

Cambiemos las animaciones que usa nuestro banner, para que se deslice hacia adentro y hacia afuera:

<!--banner.component.html-->
<igx-banner #connectionBanner [animationSettings]="animationSettings">
    ...
</igx-banner>

// banner.component.ts
import { IgxBannerComponent, slideInLeft, slideOutRight } from 'igniteui-angular'
// import { IgxBannerComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
...
export class MyBannerComponent {
    ...
    public animationSettings = {
        openAnimation: slideInLeft,
        closeAnimation: slideOutRight
    }
    ...
}

Binding to events

El componente del banner emite eventos al cambiar su estado -openingyopened se llaman cuando se muestra el banner (antes y después, respectivamente), mientras queclosing yclosed se emiten cuando el banner está cerrado. Los eventos ing (opening,closing) son cancelables: utilizan laICancelEventArgs interfaz y el objeto emitido tiene unacancel propiedad. Si lacancel propiedad está configurada como verdadera, la acción y el evento de final correspondientes no se activarán; por ejemplo, si cancelamosopening, el método delopen banner no terminará y el banner no se mostrará.

Para cancelar un evento, vincularlo al objeto emitido y establecer sucancel propiedad entrue.

<!--banner.component.html-->
    <igx-banner #connectionBanner (opening)="handleOpen($event)">
        ...
    </igx-banner>

// banner.component.ts
...
export class MyBannerComponent {
    ...
    public handleOpen(event) {
        event.cancel = true;
    }
}

Note

Si se aplican los cambios anteriores, el banner nunca se abrirá, ya que el evento de apertura siempre se cancela.

Advanced Example

Vamos a crear un banner con dos botones personalizados: uno para cancelar la notificación y otro para activar la conexión. Podemos pasar manejadores de acciones personalizados usando eligx-banner-actions selector:

<!--banner.component.html-->
<igx-banner class="offline-banner" #connectionBanner [animationSettings]="animationSettings">
    <igx-icon>signal_wifi_off</igx-icon>
        You have lost connection to the internet. This app is offline.
    <igx-banner-actions>
        <button igxButton igxRipple (click)="connectionBanner.close()">Continue Offline</button>
        <button igxButton igxRipple (click)="wifiState = true">Turn On Wifi</button>
    </igx-banner-actions>
</igx-banner>

Note

Según las directrices deMaterial Design Google, un banner debe tener un máximo de 2 botones presentes. NoIgxBannerComponent limita explícitamente el número de elementos bajo laigx-banner-actions etiqueta, pero se recomienda encarecidamente usar hasta 2 si quieres seguir las directrices de diseño del material.

La opción de descartar ('Continue Offline') no necesita más lógica, así que puede llamar alclose() método. Sin embargo, la acción de confirmar ('Turn On Wifi'), requiere algo de lógica adicional, por lo que tenemos que definirla en el componente. Luego, crearemosonNetworkStateChange Observable y nos suscribiremos a él. El último paso es llamar alrefreshBanner() método en cada cambio, lo que cambiará el banner dependiendo de elwifiState.

El banner también tendrá un icono WiFi en la barra de navegación. Cuando la suscripción se activa en cualquier cambio,wifiState el icono no solo desactiva el banner, sino que también cambia según el estado de la conexión:

<!--banner.component.html-->
<igx-navbar title="Gallery">
    <igx-icon (click)="wifiState = !wifiState">
        {{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off' }}
    </igx-icon>
</igx-navbar>

Por último, añadiremos untoast mensaje mostrando un mensaje sobre el estado del WiFi. Los resultados del banner con plantilla pueden verse en la demo a continuación:

Estilismo

Primero, para utilizar las funciones expuestas por el motor de temas, necesitamos importar el archivo de índice en nuestro archivo de estilo:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende elbanner-theme y especifica solo el$banner-background. En función de este valor, los$banner-message-color y$banner-illustration-color se configuran automáticamente en blanco o negro, dependiendo de cuál ofrezca mejor contraste con el fondo.

$custom-banner-theme: banner-theme(
  $banner-background: #011627,
);

Note

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

El último paso es pasar el tema del banner personalizado:

@include css-vars($custom-banner-theme);

API Reference

• Componente IgxBanner
• IgxBannerActionsDirectiva
• Estilos de componentes IgxBanner

Componentes adicionales y/o directivas con API relativas que se utilizaron:

• ComponenteIgxCard
• Componente IgxIcon
• Componente IgxNavbar
• Componente IgxToast

Theming Dependencies

• Tema IgxIcon
• Tema IgxButton
• Tema IgxRipple
• Tema IgxExpansionPanel

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub