Descripción general del componente de banner Angular

Angular Banner Component proporciona 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 bocadillos y menos molesta 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 a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxBannerModule en su 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, a partir de 16.0.0, puede importar IgxBannerComponent como una dependencia independiente o usar el token IGX_BANNER_DIRECTIVES 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 ha importado la Ignite UI for Angular Banner, puede comenzar con una configuración básica del componente igx-banner.

Using the Angular Banner Component

Show Banner

Para mostrar el componente de banner, use su método open() y llámelo al hacer clic en un 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 mínima interacción 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

El IgxBannerModule incluye un botón de banner predeterminado Dismiss, que cierra el banner.

Examples

​IgxBannerComponent permite crear plantillas para su contenido sin dejar de cumplir lo más posible con las pautas de banner de Material Design.

Changing the banner message

Configurar el mensaje que se muestra en el banner es fácil: simplemente cambie el contenido que está pasando a la etiqueta igx-banner. El texto aparecerá 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:

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

Adding an icon

Se puede mostrar un igx-icon en el banner pasándolo al contenido del banner. El icono siempre estará colocado al principio del mensaje del banner.

Note

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

Para pasar un igx-icon a su banner, simplemente insértelo 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 desea utilizar un igx-icon en su mensaje de banner, envuélvalo en una etiqueta span:

<!--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

​IgxBannerModule expone una directiva para crear plantillas para los botones del banner: IgxBannerActionsDirective. Esta directiva le permite anular el botón de banner predeterminado (Dismiss) y agregar 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 de banner viene con la propiedad animationSettings que permite aplicar animaciones personalizadas de apertura y cierre. Los desarrolladores pueden elegir entre animaciones autodefinidas y aquellas de nuestra Animation suite. Los predeterminados, utilizados por el banner, son growVerIn para entrar y growVerOut 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 de banner emite eventos cuando cambia su estado: opening y opened se llaman cuando se muestra el banner (antes y después, respectivamente), mientras que closing y closed se emiten cuando se cierra el banner. Los eventos de ing (opening, closing) se pueden cancelar: utilizan la interfaz ICancelEventArgs y el objeto emitido tiene una propiedad cancel. Si la propiedad cancel se establece en verdadero, la acción final y el evento correspondientes no se activarán; por ejemplo, si cancelamos opening, el método de open del banner no finalizará y el banner no se mostrará.

Para cancelar un evento, vincúlelo al objeto emitido y establezca su propiedad cancel en true.

<!--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

Creemos 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 el selector igx-banner-actions:

<!--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 pautas Material Design de Google, un banner debe tener un máximo de 2 botones presentes. IgxBannerComponent no limita explícitamente la cantidad de elementos bajo la etiqueta igx-banner-actions, pero se recomienda encarecidamente usar hasta 2 si desea cumplir con las pautas de diseño de materiales.

La opción de descartar ( 'Continue Offline') no necesita más lógica, por lo que simplemente puede llamar al método close(). La acción de confirmación ( 'Turn On Wifi'), sin embargo, requiere cierta lógica adicional, por lo que tenemos que definirla en el componente. Luego, crearemos onNetworkStateChange Observable y nos suscribiremos. El último paso es llamar al método refreshBanner() en cada cambio, que alternará el banner dependiendo de wifiState.

El banner también tendrá un ícono de WiFi en la barra de navegación. A medida que la suscripción se activa ante cualquier cambio de wifiState, el ícono no solo alternará el banner, sino que cambiará 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>

Finalmente agregaremos un toast, mostrando un mensaje sobre el estado del WiFi. Los resultados del banner con plantilla se pueden ver en la demostración 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 simple, creamos un nuevo tema que extiende el banner-theme y acepta los parámetros $banner-message-color, $banner-background y $banner-illustration-color.

$custom-banner-theme: banner-theme(
    $banner-message-color: #151515,
    $banner-background: #dedede,
    $banner-illustration-color: #666666
);

Using CSS variables

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

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

Using mixins

Para diseñar componentes para navegadores más antiguos, como Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.

Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:

:host {
    ::ng-deep {
        // Pass the custom banner theme to the `igx-banner` mixin
        @include banner($custom-banner-theme);
    }
}

Using color palettes

En lugar de codificar los valores de color, como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.

La función igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:

$white-color: #dedede;
$black-color: #151515;

$light-banner-palette: palette($primary: $white-color, $secondary: $black-color);

Y luego con igx-color podemos recuperar fácilmente el color de la paleta.

$custom-banner-theme: banner-theme(
    $banner-message-color: color($light-banner-palette, "secondary", 400),
    $banner-background: color($light-banner-palette, "primary", 400),
    $banner-illustration-color: color($light-banner-palette, "secondary", 100)
);

Note

​igx-color e igx-palette son funciones potentes para generar y recuperar colores. Consulte el tema Palettes para obtener orientación detallada sobre cómo utilizarlas.

Using schemas

Puede crear una estructura sólida y flexible que se beneficie de schemas. Amplíe uno de los dos esquemas predefinidos que se proporcionan para cada componente, en este caso, el esquema light-banner:

//  Extending the banner schema
$light-toast-schema: extend($_light-toast,
    (
        banner-message-color: (
           color: ("secondary", 400)
        ),
        banner-background: (
           color: ("primary", 400)
        ),
        banner-illustration-color: (
           color: ("secondary", 100)
        )
    )
);

// Defining banner with the global light schema
$custom-banner-theme: banner-theme(
  $palette: $light-banner-palette,
  $schema: $light-toast-schema
);

No olvide incluir los temas de la misma manera que se demostró anteriormente.

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 angulares
• Ignite UI for Angular GitHub