Descripción general de la barra de navegación de Web Components
La barra de navegación Ignite UI for Web Components 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.
Web Components Navbar Example
El siguiente ejemplo representa un IgcNavbarComponent con iconos y encabezado de texto:
Usage
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
import { defineComponents, IgcNavbarComponent } from 'igniteui-webcomponents';
defineComponents(IgcNavbarComponent);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.
Luego, en la plantilla de IgcNavbarComponent, puede agregar el siguiente código para mostrar un IgcNavbarComponent básico solo con un título:
<igc-navbar>Navigation Title</igc-navbar>
Content
Puede mejorar el IgcNavbarComponent componente agregando IgcIconComponent u otros componentes en la posición inicial o final como contenido, lo que permite a los usuarios navegar a las posiciones clave directamente desde la barra:
<igc-navbar>
<igc-icon name="home" slot="start"></igc-icon>
<h2>Sample App</h2>
<igc-icon name="search" slot="end"></igc-icon>
...
</igc-navbar>
Styling
El NavBar componente expone varias partes CSS, lo que le proporciona un 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: