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

    La Ignite UI for Angular IgxNavbarComponent 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 buscar o favoritos, lo que ayuda a los usuarios a navegar sin problemas a través de una aplicación sin intentar moverse a rutas o estados no válidos. La barra se encuentra en la parte superior del contenedor en el que se coloca.

    Ejemplo de barra de navegación Angular

    EXAMPLE
    MODULES
    TS
    HTML

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Primeros pasos con Ignite UI for Angular Navbar

    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
    cmd

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

    El primer paso es importar el IgxNavbarModule dentro de nuestro archivo app.module.ts.

    // app.module.ts
    
    import { IgxNavbarModule } from 'igniteui-angular';
    // import { IgxNavbarModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxNavbarModule],
        ...
    })
    export class AppModule {}
    typescript

    Alternativamente, a partir de 16.0.0, puede importar IgxNavbarComponent como una dependencia independiente o usar el token IGX_NAVBAR_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

    // home.component.ts
    
    import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular';
    // 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 {}
    typescript

    Ahora que ha importado la Ignite UI for Angular Navbar, puede comenzar a usar el componente igx-navbar.

    Usando la barra de navegación Angular

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

    Agregar botón de menú

    Para agregar un botón de menú, mostraremos el botón de acción usando la propiedad actionButtonIcon y haremos que use un ícono de menú de la siguiente manera:

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

    actionButtonIcon utiliza el conjunto de fuentes Material por diseño.

    Agregar botones de iconos

    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, IgxIconButtonDirective, IgxIconModule } from 'igniteui-angular';
    // import { IgxNavbarModule, IgxButtonModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxIconButtonDirective, IgxIconModule],
    })
    export class AppModule {}
    typescript

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

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

    EXAMPLE
    MODULES
    TS
    HTML

    Agregar acción personalizada

    ¿Qué pasa si queremos utilizar una plantilla personalizada para la navegación de nuestra aplicación en la parte más izquierda de la barra de navegación? Podemos lograr esto fácilmente usando la directiva igx-navbar-action, que mostrará el contenido que hemos proporcionado. Lo haremos usando un botón con el ícono 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");
    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>
    html

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Agregar icono de navegación

    Si queremos crear una barra de navegación con un icono de navegación hacia atrás, debemos seguir un par de pasos. Primero, podemos usar la propiedad actionButtonIcon para elegir un icono adecuado del conjunto de fuentes Material. Luego, podemos hacer una verificación simple si hay páginas visitadas anteriormente a las que regresar y pasar el resultado a la propiedad isActionButtonVisible. El último paso es crear un método para navegar hacia atrás y vincularlo a la propiedad action.

    <!--navbar.component.html-->
    
    <igx-navbar
      title="Ignite UI for Angular"
      actionButtonIcon="arrow_back"
      [isActionButtonVisible]="canGoBack()"
      (action)="navigateBack()"
    >
    </igx-navbar>
    html
    export class NavbarSample3Component {
      constructor(private _location: Location) {}
    
      public ngOnInit() {}
    
      public navigateBack() {
        this._location.back();
      }
    
      public canGoBack() {
        return window.history.length > 0;
      }
    }
    typescript

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

    EXAMPLE
    MODULES
    TS
    HTML

    Si se proporciona igx-navbar-action o igxNavbarAction, no se utilizará el actionButtonIcon predeterminado.

    Agregar título personalizado

    Si queremos proporcionar un contenido personalizado para el título de una barra de navegación, podemos lograrlo usando la directiva igx-navbar-title o igxNavbarTitle. Reemplazarán el título de la barra de navegación predeterminado proporcionado por la propiedad de entrada title. El siguiente ejemplo 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>
    html

    Si se proporciona igx-navbar-title o igxNavbarTitle, no se utilizará el title predeterminado.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Estilo

    Para comenzar a diseñar la barra de navegación, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

    Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el navbar-theme y acepta los parámetros $text-color, $background, $idle-icon-color y $hover-icon-color.

    $custom-navbar-theme: navbar-theme(
      $text-color: #151515,
      $background: #dedede,
      $idle-icon-color: #151515,
      $hover-icon-color: #8c8c8c,
    );
    scss

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores mediante el uso de las palette funciones y color. Consulte el Palettes tema para obtener orientación detallada sobre cómo usarlos.

    El último paso es pasar el tema recién creado a la css-vars mezcla:

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

    Manifestación

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    App Builder | Banner de llamada a la acción

    Referencias de API

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

    Dependencias temáticas

    Recursos adicionales

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