React Navbar Overview

    La barra de navegación Ignite UI for React informa al usuario de su posición actual en una aplicación. La barra de navegación también puede proporcionar enlaces a acciones rápidas como la búsqueda o el favorito, lo que ayuda a los usuarios a navegar sin problemas por una aplicación sin intentar pasar a rutas o estados no válidos. La barra se encuentra en la parte superior del recipiente en el que se coloca.

    React Navbar Example

    El siguiente ejemplo representa unIgrNavbar con iconos y encabezado de texto:

    Usage

    Antes de usarlosIgrNavbar, debes registrarlo de la siguiente manera:

    Para una introducción completa al Ignite UI for React, lee el tema Empezar.

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrNavbar CSS necesario de la siguiente manera:

    import { IgrNavbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrNavbar>
    <span>Navigation Title</span>
</IgrNavbar>

    Content

    Puedes mejorar elIgrNavbar componente añadiendoIgrIcon otros componentes en la posición inicial o final como contenido, permitiendo a los usuarios navegar directamente desde la barra a las posiciones clave:

     <IgrNavbar>
    <div slot="start">
        <IgrIcon name="home" collection="material" />
    </div>
    <h2>Sample App</h2>
    <div slot="end">
        <IgrIcon name="search" collection="material" />
    </div>
    ...
</IgrNavbar>

    Styling

    ElNavBar componente expone varias partes CSS, dándote control total sobre su estilo:

    Nombre Descripción
    base El contenedor base de la barra de navegación.
    start El contenedor de iconos alineado a la izquierda.
    middle El contenedor de título de la barra de navegación.
    end El contenedor de iconos de acción alineados a la derecha. 
    igc-icon {
  color: var(--ig-primary-500);
}

igc-navbar {
  background-color: var(--ig-secondary-200);
}

igc-navbar::part(middle) {
  font-family: Titillium Web, sans-serif;
  color: var(--ig-primary-500);;
}

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

    API References

    Additional Resources