Descripción general de la barra de navegación 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 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.
Web Components Navbar Example
El siguiente ejemplo representa un IgcNavbarComponent con iconos y encabezado de texto:
Usage
Primero, debe instalar la 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 Introducción.
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 agregar algunos elementos IgcIconComponent usando las ranuras Start y End al IgcNavbarComponent como se muestra en el siguiente ejemplo:
Styling
El componente Barra de navegación expone varias partes CSS (base, start, middle y end) para brindarle control total sobre su estilo.
igc-icon {
color: currentColor;
}
igc-navbar {
background-color: #232121
}
igc-navbar::part(start) {
color: #f23269;
}
igc-navbar::part(middle) {
font-family: Titillium Web,sans-serif;
color: #e9e8ea
}
igc-navbar::part(end) {
color: #e9e8ea
}
Si todo ha ido bien deberías ver lo siguiente en tu navegador: