Una Icon Bar es un elemento de interfaz de usuario que proporciona un menú para navegar rápidamente por una aplicación. Puede utilizarse horizontal o verticalmente, con las etiquetas debajo de los iconos o a la derecha, adaptándose a las preferencias del usuario.
Icon Bar básico
Crear una Icon Bar básica es sencillo. Solo necesitas usar HTML básico, especificando el número de elementos para que se distribuyan uniformemente. Por ejemplo, para una Icon Bar con cinco elementos:
Icon Bar vertical
Para convertir una Icon Bar horizontal en vertical, simplemente agrega la clase .vertical. También puedes crear Icon Bar s que se adapten al tamaño de la pantalla, utilizando las clases .medium-verticaly .large-vertical:
Icon Bar avanzada
En lugar de imágenes, puedes utilizar fuentes de iconos (Icon Fonts). Esto te permitirá cambiar los colores y el tamaño más rápido, sin tener que subir nuevas imágenes cada vez.
Opciones adicionales
La orientación predeterminada para las etiquetas es en la parte inferior. Puedes cambiar la posición de la etiqueta a la derecha con la clase .label-right.
Para deshabilitar un elemento de la Icon Bar, agrega la clase .disabled. Esto le dará un aspecto atenuado y deshabilitará los efectos de desplazamiento.
Accesibilidad
Para que la Icon Bar sea navegable con el teclado, agrega el atributo tabindex="0"a cada elemento. Esto permitirá que se enfoque al presionar la tecla Tab. También debes agregar el atributo role="button", indicando su funcionalidad.
Para Icon Bar s sin etiquetas de texto, agrega aria-labela cada elemento, con un valor que represente el icono. Para Icon Bar s con etiquetas, asigna un ID único a cada etiqueta y agrega aria-labelledbyal contenedor de cada elemento, con un valor igual al ID de la etiqueta.
Personalización con Sass
La Icon Bar se puede personalizar fácilmente utilizando las variables Sass proporcionadas.
$include-html-icon-bar-classes: $include-html-classes // Usamos estas variables para el estilo de la icon-bar y sus elementos $icon-bar-bg: $oil; $icon-bar-font-color: $white; $icon-bar-font-color-hover: $icon-bar-font-color; $icon-bar-font-size: 1rem; $icon-bar-hover-color: $primary-color; $icon-bar-icon-color: $white; $icon-bar-icon-color-hover: $icon-bar-icon-color; $icon-bar-icon-size: 875rem; $icon-bar-image-width: 875rem; $icon-bar-image-height: 875rem; $icon-bar-active-color: $primary-color; $icon-bar-item-padding: 25rem; $icon-bar-disabled-opacity: 0.7
Marcado semántico con Sass
Básico
Puedes utilizar la mezcla icon-bar()para crear tu propia Icon Bar, como se muestra a continuación:
.my-custom-class { @include icon-bar(); }
Avanzado
Puedes personalizar aún más tu Icon Bar utilizando las opciones proporcionadas en la mezcla icon-bar():
.my-custom-class { @include icon-bar ( // Establece el color de fondo de la icon-bar. Predeterminado: $icon-bar-bg. $bar-bg: $icon-bar-bg, // Establece el color de la fuente de la icon-bar. Predeterminado: $icon-bar-font-color. $bar-font-color: $icon-bar-font-color, // Establece el color de fondo al pasar el mouse por la icon-bar. Predeterminado: $icon-bar-hover-color. $bar-hover-color, // Establece el color de los iconos de la icon-bar. Predeterminado: $icon-bar-icon-color $bar-icon-color: $icon-bar-icon-color, // Establece el color de fondo cuando se hace clic o se toca la icon-bar (o los elementos dentro de la icon-bar). Predeterminado: $icon-bar-active-color. $bar-active-color, // Establece el relleno de la icon-bar. Predeterminado: $icon-bar-item-padding. $padding, // Establece el tamaño de la fuente de la icon-bar. Predeterminado: $icon-bar-font-size. $font-size, // Establece el tamaño de los iconos dentro de la icon-bar. Predeterminado: $icon-bar-icon-size. $icon-size, // Establece el ancho de las imágenes dentro de la icon-bar. Predeterminado: $icon-bar-image-width $image-width, // Establece la altura de las imágenes dentro de la icon-bar. Predeterminado: $icon-bar-image-height $image-height, // Asigna si se deben incluir o no los estilos base que suelen estar asociados con la icon-bar para que aparezca como suele hacerlo. Predeterminado: true. $base-style: true, // Permite iconos deshabilitados. Predeterminado: false. // Si está habilitado, agrega la clase disabled. $disabled: false ); }
Errores de Sass
Si la importación predeterminada de "foundation" se comentó, asegúrate de importar este archivo:
@import "foundation/components/icon-bar";
Si quieres conocer otros artículos parecidos a Icon bar para diseñadores web puedes visitar la categoría Chocolate.