Vuetify con iconos y fuentes sin internet

Vuetify agrega diseños y componentes de Material Design a nuestras aplicaciones creadas con Vue. Para varios casos necesitamos los iconos de Material Design así como la fuente Roboto de Google.

Hoy te mostraré cómo tener los iconos y la fuente de manera offline, fuera de línea, local, o como le llames. De este modo nuestra aplicación no dependerá de ninguna conexión a internet, cosa que viene genial cuando vamos a crear una app local.

(más…)

Menú de navegación con Angular Material

Menú de navegación con Angular Material

Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha.

Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos:

  • Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación
  • Mat Sidenav Container: el contenedor de lo que veremos a continuación
  • Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación
  • Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección

Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material.

Si quieres ver el ejemplo terminado haz click aquí.

(más…)