| Resumen | F NAV - Pestañas de navegación para móviles | |
| Vista previa | Theme Creator | |
| Repositorio | GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub | |
| ¿Te resultó útil? | > ./support --coffee | |
| Guía de instalación | Cómo instalar un tema o un componente de tema | |
| ¿Nuevo en temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse |
Instalar este componente de tema
Hola ![]()
Anteriormente, creé un tema Development para ello como concepto de componente de tema y ahora se encuentra en un estado listo para ser un Customization > Theme component.
Asegúrate de probarlo antes de usarlo en producción.
Alguna información sobre el componente aquí: F NAV - Theme component concept
Sobre el componente de tema. He leído muchos posts sobre lo maravilloso que sería hacer que la Barra de pestañas de Discourse para móviles fuera más dinámica y añadir la capacidad de gestionar, por ejemplo, las notificaciones, etc… F-NAV puede hacer esto y mucho más…
Cabecera
Ocultar el menú hamburguesa, el menú de usuario, la búsqueda y el chat, y añade un botón de menú de perfil (avatar) que contiene el contenido de la pestaña de perfil del menú de usuario predeterminado.
Configuración
También contiene una configuración donde puedes añadir elementos personalizados antes del elemento Cerrar sesión.
Contiene tres campos donde puedes añadir fácilmente elementos personalizados.
Hay algunas configuraciones para mostrar/ocultar los iconos predeterminados de la cabecera, lo cual es útil cuando no quieres colocar la pestaña exacta en F NAV para que se muestre en la cabecera.
Pestañas
Es posible asociar diferentes funciones con las pestañas. Estas funciones permiten que cada pestaña cambie dinámicamente.

Estos cambios incluyen:
Funciones
home
- cambia el icono de la pestaña de inicio en las rutas de temas a una flecha izquierda, lo que añade una función de retroceso

- añade un punto indicador de tema nuevo o no leído

hamburger (abre el menú hamburguesa)
multi
pestaña multi
La pestaña multi cambia automáticamente a la pestaña de mensajes si el chat no está habilitado o si el usuario lo desactiva en la
configuración de usuario.
La burbuja de notificaciones cambia según sea urgente o no.
Las notificaciones urgentes de la pestaña multi son de color verde y se ven así. ![]()
Expandido
El mensaje personal siempre es de color verde, pero el chat puede ser de color azul, como en el caso original de la notificación de mensaje de canal no leído.
Expandido
Notificación única
message
- añade un botón de mensajes con notificaciones y al hacer clic en él se abre un modal de mensajes para una vista rápida
chat
- añade el botón de chat con sus funciones
notificationToRoute
-
si la opción no molestar está activa, el icono de la campana cambiará al icono de campana tachada y aparecerá la hora de finalización de la dnd

-
redirige a la página de notificaciones del perfil, omitiendo el menú de notificaciones
- si hay una notificación, redirige a
/notifications?filter=unread - si no hay notificación, redirige a
/notifications - si hay contenido revisable, aparecerá una bandera roja y redirigirá a
/review
- si hay una notificación, redirige a
notificationMenu
-
si la opción no molestar está activa, el icono de la campana cambiará al icono de campana tachada y aparecerá la hora de finalización de la dnd

-
abre el menú de notificaciones
search
- redirige a la página
/searchbasada en el contexto
Configuración
He intentado hacer la configuración lo más simple posible.
Contendrá cuatro campos.
- name: Esto es solo para identificar más fácilmente la pestaña en la configuración.
- icon: Añade un icono a la pestaña. Nota: Si seleccionas una función, es posible que haya iconos que no se puedan sobrescribir con esta configuración.
- destination: Añade un destino para tu pestaña personalizada. Nota: Si seleccionas una función, esta gestionará el destino, por lo que puedes dejarlo vacío. El componente gestiona los destinos
/my/...y los convierte automáticamente a/u/username/...para que se pueda añadir correctamente el estado activo de las pestañas. - function: Elige una función para la pestaña.
Los administradores pueden simplemente crear/eliminar/cambiar pestañas y seleccionar una de las funciones o añadir un destino personalizado a la pestaña.
Funciones ![]()
Por ejemplo, añadir una pestaña de creación de temas se vería simplemente así.
Créditos: Discourse Tab Bar for Mobile y gracias a todos por los comentarios en el tema F NAV - Theme component concept. ![]()


















