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.

    Ejemplo de barra de navegación de Web Components

    El siguiente ejemplo representa un IgcNavbarComponent con iconos y encabezado de texto:

    EXAMPLE
    TS
    HTML
    CSS

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

    Uso

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents
    cmd
    import { defineComponents, IgcNavbarComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcNavbarComponent);
    ts

    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>
    html
    Ignite UI for Web Components | CTA Banner

    Contenido

    Puede agregar algunos elementos IgcIconComponent usando las ranuras Start y End al IgcNavbarComponent como se muestra en el siguiente ejemplo:

    EXAMPLE
    TS
    HTML
    CSS

    Estilo

    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
    }
    css

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

    EXAMPLE
    TS
    HTML
    index.css
    NavbarStyling.css

    Referencias de API

    Recursos adicionales