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:
<!DOCTYPE html><html><head><title>NavbarOverview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-navbarstyle="height:65px"><igc-iconname="home"slot="start"></igc-icon><h2>Sample App</h2><igc-iconname="search"slot="end"></igc-icon><igc-iconname="favorite"slot="end"></igc-icon><igc-iconname="more_vert"slot="end"></igc-icon></igc-navbar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */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:
<!DOCTYPE html><html><head><title>NavbarOverview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-navbarstyle="height:65px"><igc-iconname="home"slot="start"></igc-icon><h2>Sample App</h2><igc-iconname="search"slot="end"></igc-icon><igc-iconname="favorite"slot="end"></igc-icon><igc-iconname="more_vert"slot="end"></igc-icon></igc-navbar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Estilo
El componente Barra de navegación expone varias partes CSS (base, start, middle y end) para brindarle control total sobre su estilo.
<!DOCTYPE html><html><head><title>NavbarStyling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-navbarstyle="height:65px"><igc-iconname="home"slot="start"></igc-icon><h2>Sample App</h2><igc-iconname="search"slot="end"></igc-icon><igc-iconname="favorite"slot="end"></igc-icon><igc-iconname="more_vert"slot="end"></igc-icon></igc-navbar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css