Angular Componente de Navbar –Ignite UI for Angular | Infragistics

El Ignite UI for AngularIgxNavbarComponent es un componente de encabezado de aplicación que informa al usuario de su posición actual en una aplicación y le ayuda a retroceder (muy parecido al botón "atrás" en un navegador). La Barra de navegación también puede proporcionar enlaces a acciones rápidas como búsqueda o favoritos, ayudando a los usuarios a navegar sin problemas por una aplicación sin tener que moverse a rutas o estados inválidos. La barra se sitúa en la parte superior del recipiente en el que está colocada.

Para comenzar con el componente Ignite UI for Angular Navbar, 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 primer paso es importar elIgxNavbarModule interior de nuestro archivo app.module.ts.

// app.module.ts

import { IgxNavbarModule } from 'igniteui-angular/navbar';
// import { IgxNavbarModule } from '@infragistics/igniteui-angular'; for licensed package

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

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

// home.component.ts

import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular/navbar';
// import { IGX_NAVBAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: '<igx-navbar title="Ignite UI for Angular"></igx-navbar>',
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_NAVBAR_DIRECTIVES],
  /* or imports: [IgxNavbarComponent] */
})
export class HomeComponent {}

Ahora que tienes importado el módulo o directivas de la barra de navegación Ignite UI for Angular, puedes empezar a usar eligx-navbar componente.

Luego en la plantilla de nuestro componente podemos agregar el siguiente código para mostrar una barra de navegación básica con un título:

<!--navbar.component.html-->

<igx-navbar title="Ignite UI for Angular"> </igx-navbar>

Para añadir un botón de menú, mostraremos el botón de acción usando laactionButtonIcon propiedad y haremos que utilice un icono de menú de la siguiente manera:

<!--navbar.component.html-->

<igx-navbar title="Sample App" actionButtonIcon="menu" [isActionButtonVisible]="true"></igx-navbar>

Note

UtilizaactionButtonIcon el conjunto de fuentes Material por diseño.

Add Icon Buttons

Podemos hacer que nuestra aplicación sea un poco más funcional agregando opciones de búsqueda, favoritos y más. Para ello, tomemos los módulos IgxIconButton e IgxIcon e importémoslos en nuestro archivo app.module.ts.

// app.module.ts

...
import { IgxNavbarModule } from 'igniteui-angular/navbar';
import { IgxIconButtonDirective } from 'igniteui-angular/directives';
import { IgxIconModule } from 'igniteui-angular/icon';
// import { IgxNavbarModule, IgxButtonModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

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

A continuación, debemos actualizar nuestra plantilla con un botón de icono para cada una de las opciones que queremos que proporcione nuestra aplicación:

<!--navbar.component.html-->

<igx-navbar title="Sample App">
  <button igxIconButton="flat">
    <igx-icon>search</igx-icon>
  </button>
  <button igxIconButton="flat">
    <igx-icon>favorite</igx-icon>
  </button>
  <button igxIconButton="flat">
    <igx-icon>more_vert</igx-icon>
  </button>
</igx-navbar>

Si todo ha ido bien deberías ver lo siguiente en tu navegador:

Add Custom Action

¿Y si queremos usar una plantilla personalizada para la navegación de la app en la parte más izquierda de la barra de navegación? Podemos lograrlo fácilmente usando laigx-navbar-action directiva, que mostrará el contenido que hemos proporcionado. Lo haremos usando un botón con el icono de inicio de Font Awesome.

/* navbar.component.css */

@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");

<!--navbar.component.html-->

<igx-navbar title="Sample App">
  <igx-navbar-action>
    <button igxIconButton="flat">
      <igx-icon family="fa" name="fa-home"></igx-icon>
    </button>
  </igx-navbar-action>

  <button igxIconButton="flat">
    <igx-icon>search</igx-icon>
  </button>
  <button igxIconButton="flat">
    <igx-icon>favorite</igx-icon>
  </button>
  <button igxIconButton="flat">
    <igx-icon>more_vert</igx-icon>
  </button>
</igx-navbar>

Finalmente, así es como debería verse nuestra barra de navegación con su ícono de botón de acción personalizado:

Si queremos crear una barra de navegación con un icono que navegue hacia atrás, deberíamos seguir un par de pasos. Primero, podemos usar laactionButtonIcon propiedad para elegir un icono adecuado del conjunto de fuentes Material. Luego, podemos hacer una comprobación sencilla si hay páginas visitadas previamente a las que volver y enviar el resultado a laisActionButtonVisible propiedad. El último paso es crear un método para volver y engancharla a laaction propiedad.

<!--navbar.component.html-->

<igx-navbar
  title="Ignite UI for Angular"
  actionButtonIcon="arrow_back"
  [isActionButtonVisible]="canGoBack()"
  (action)="navigateBack()"
>
</igx-navbar>

export class NavbarSample3Component {
  constructor(private _location: Location) {}

  public ngOnInit() {}

  public navigateBack() {
    this._location.back();
  }

  public canGoBack() {
    return window.history.length > 0;
  }
}

Si el ejemplo está configurado correctamente, debería ver lo siguiente en su navegador:

Note

Siigx-navbar-action se proporciona oigxNavbarAction se proporciona, no se usará el valor predeterminadoactionButtonIcon.

Add Custom Title

Si queremos proporcionar un contenido personalizado para el título de una barra de navegación, podemos lograrlo usandoigx-navbar-title una directiva.igxNavbarTitle Sustituirán el título de la barra de navegación predeterminada proporcionado portitle la propiedad de entrada. La muestra siguiente tiene un título personalizado que contiene un enlace con una imagen:

<!--navbar.component.html-->

<div class="sample-column">
  <igx-navbar>
    <igx-navbar-action>
      <button igxIconButton="flat">
        <igx-icon>menu</igx-icon>
      </button>
    </igx-navbar-action>

    <div igxNavbarTitle>
      <a href="https://es.infragistics.com/products/ignite-ui-angular" target="_blank">
        <img
          src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
          width="120px"
          height="50px"
          alt
          style="margin-top: 7px;"
        />
      </a>
    </div>

    <button igxIconButton="flat">
      <igx-icon>search</igx-icon>
    </button>
    <button igxIconButton="flat">
      <igx-icon>favorite</igx-icon>
    </button>
    <button igxIconButton="flat">
      <igx-icon>more_vert</igx-icon>
    </button>
  </igx-navbar>
</div>

Note

Siigx-navbar-title se proporciona oigxNavbarTitle se proporciona, no se usará el valor predeterminadotitle.

Estilismo

Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

Propiedad principal	Propiedad dependiente	Descripción
$background	$text-color	El color del texto de la barra de navegación
	$idle-icono-color	El color del icono de inactividad de la barra de navegación
	$hover-icono-color	El color del icono del cursor de la barra de navegación
	$border color (cambios solo para la variante índigo)	El color del borde de la barra de navegación
$idle-icono-color	$hover-icono-color	El color del icono del cursor de la barra de navegación

Para empezar a estilizar la barra de navegación, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

@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 elnavbar-theme y proporciona solo los$background parámetros y$idle-icon-color. El tema calculará automáticamente todos los colores de fondo y primer plano necesarios para los distintos estados de interacción. Si es necesario, también puedes anular manualmente ciertas propiedades para un control más fino sobre la apariencia.

$custom-navbar-theme: navbar-theme(
  $background: #011627,
  $idle-icon-color: #ecaa53,
);

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 recién creado alcss-vars mixin:

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

Demo

Styling with Tailwind

Puedes diseñar la barra de navegación usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

El archivo de utilidad incluye variantes tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-navbar,dark-navbar.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el tema de la barra de navegación. La sintaxis es la siguiente:

<igx-navbar class="!light-navbar ![--background:#7B9E89] ![--text-color:#121E17]" title="Sample App">
  ...
</igx-navbar>

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final tu barra de navegación debería verse así:

API References

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

Theming Dependencies

Additional Resources

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

Descripción general del componente de la barra de navegación de Angular

Angular Navbar Example

Getting Started with Ignite UI for Angular Navbar

Using the Angular Navbar

Add Menu Button

Note

Add Icon Buttons

Add Custom Action

Add Navigation Icon

Note

Add Custom Title

Note

Estilismo

Navbar Theme Property Map

Note

Demo

Styling with Tailwind

Note

API References

Theming Dependencies

Additional Resources

Tematización