• Compra una licencia de Windows 10/11 (10€) u Office (18€) al mejor precio u Office al mejor precio. Entra en este post con las ofertas
  • ¡Bienvenid@! Recuerda que para comentar en el foro de El Chapuzas Informático necesitas registrar tu cuenta, tardarás menos de 2 minutos y te dará valiosa información además de ayudarte en lo que necesites o pasar un rato agradable con nosotros.

Feedback a un navbar responsive con Tailwind.

pastrypuffingpuffer

Chapucillas
Registrado
25 Dic 2021
Mensajes
51
Puntos
8
Hola a todos, hace unos días decidí aprender TailwindCSS y hoy me dio por crear una barra de navegación responsive para así aplicar mis conocimientos, para este navbar, usé Vite y Vue.js y al terminarlo lo subí a codesandbox.

Me gustaría que me dijerais qué puedo hacer para mejorarlo y saber si le falta algo.
 
No conozco muy bien Tailwind. No obstante, algunas observaciones:

- Con un ancho de pantalla bajo (por debajo del breakpoint de ocultar los items del navbar), desplegar el navbar desplaza todo lo demás hacia abajo. ¿Es esa la intención? Normalmente las navbar se despliegan sin necesidad de desplazar el resto del contenido.

- Con un ancho de pantalla alto, el fondo gris no ocupa todo el ancho pero en cambio crece gradualmente a medida que ensanchamos. De nuevo: ¿es la intención? Esperaría de un navbar que siempre ocupara todo el ancho y una de dos posibilidades:
1) que el contenido interior tuviera un ancho máximo fijo (siendo ésta la más habitual, diría yo)
2) que el contenido interiorocupara todo el ancho disponible
 
Esta chula la navbar, tailwind es bastante bonito y ligero, lo probé en un proyecto y me recordó a bootstrap en algunas cosas, yo no toco casi diseño por eso uso bootstrap :)

Intentaré meterlo en algun proyecto con vue.js a ver que tal me queda.
 
No conozco muy bien Tailwind. No obstante, algunas observaciones:

- Con un ancho de pantalla bajo (por debajo del breakpoint de ocultar los items del navbar), desplegar el navbar desplaza todo lo demás hacia abajo. ¿Es esa la intención? Normalmente las navbar se despliegan sin necesidad de desplazar el resto del contenido.

- Con un ancho de pantalla alto, el fondo gris no ocupa todo el ancho pero en cambio crece gradualmente a medida que ensanchamos. De nuevo: ¿es la intención? Esperaría de un navbar que siempre ocupara todo el ancho y una de dos posibilidades:
1) que el contenido interior tuviera un ancho máximo fijo (siendo ésta la más habitual, diría yo)
2) que el contenido interiorocupara todo el ancho disponible
Hostias, tienes razón, había cambiado en local que el fondo del navbar entero fuera gris en vez de sólo el wrapper. Lo acabo de arreglar.

En cuanto a lo de desplazar el contenido hacia abajo, no había pensado en que movería el contenido hacia abajo, he visto tanto menús desplegables que desplazan los elementos, y menús desplegables que no los desplazan. Desde mi punto de vista, tiene sentido que desplace el contenido para así no ocultarlo, aunque al final da un poco igual porque el usuario acabará cerrando el menú para así volver a ver el contenido.
 
Esta chula la navbar, tailwind es bastante bonito y ligero, lo probé en un proyecto y me recordó a bootstrap en algunas cosas, yo no toco casi diseño por eso uso bootstrap :)

Intentaré meterlo en algun proyecto con vue.js a ver que tal me queda.
La verdad es que me está gustando mucho, definitivamente lo acabaré usando para proyectos futuros. Lo mejor de TailwindCSS es que la versión 3.0 introdujo el JIT compiler, que sólo compila los estilos que usas, disminuyendo el tamaño del archivo CSS generado, si quieres probarlo con el CDN, la documentación explica muy bien cómo se hace.
 
Desde mi punto de vista, tiene sentido que desplace el contenido para así no ocultarlo, aunque al final da un poco igual porque el usuario acabará cerrando el menú para así volver a ver el contenido.
Puede ser, pero el usuario está acostumbrado a la metáfora del menú emergente. Te animo a que hagas un escaneo rápido por diversos sitios web y observes por ti mismo en cuantos el contenido queda desplazado.
 
Puede ser, pero el usuario está acostumbrado a la metáfora del menú emergente. Te animo a que hagas un escaneo rápido por diversos sitios web y observes por ti mismo en cuantos el contenido queda desplazado.
Acabo de revisar algunas webs en el móvil y la mayoría de menús de navegación salen de los lados y no desplazan el contenido. Nunca me había fijado ya que no suelo usar el móvil para navegar por internet xD.
 
Arriba