| 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 | |
| Guía de instalación | Cómo instalar un tema o componente de tema | |
| ¿Nuevo en los temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse |
Instala este componente de tema
Hola ![]()
Anteriormente, creé un tema en Development para ello como concepto de componente de tema, y ahora está en un estado que permite ser un Customization > Theme component.
Asegúrate de probarlo antes de usarlo en producción.
Alguna información aquí sobre el componente: F NAV - Theme component concept
Acerca del componente de tema. He leído muchos posts sobre lo maravilloso que sería hacer la Barra de pestañas de Discourse para móviles más dinámica y agregar la capacidad de gestionar, por ejemplo, notificaciones, etc. F-NAV puede hacer esto y más…
Encabezado
Oculta 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 agregar elementos personalizados antes del elemento “Cerrar sesión”.
Contiene tres campos donde puedes agregar fácilmente elementos personalizados.
Hay algunas configuraciones para mostrar/ocultar los iconos predeterminados del encabezado, lo cual es útil cuando no deseas colocar la pestaña exacta en F NAV, por lo que se mostrará en el encabezado.
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 (Inicio)
- 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 “volver”

- añade un indicador de punto para temas nuevos o no leídos

hamburger (abre el menú hamburguesa)
multi (Múltiple)
Pestaña múltiple
La pestaña múltiple 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 múltiple son verdes y se ven así. ![]()
Expandido
Los mensajes personales siempre son verdes, pero el chat puede ser azul, como originalmente para notificaciones de mensajes de canales no leídos, por ejemplo.
Expandido
Notificación individual
message (Mensaje)
- añade un botón de mensajes con notificaciones y al hacer clic se abre un modal de mensajes para una vista rápida
chat (Chat)
- añade un botón de chat con sus funciones
notificationToRoute (Notificación a ruta)
-
si la opción “No molestar” está activa, el icono de la campana cambiará a un icono de campana tachada y el tiempo restante de “No molestar” aparecerá

-
redirige a la página de notificaciones del perfil, omitiendo el menú de notificaciones
- si hay notificaciones, redirige a
/notifications?filter=unread - si no hay notificaciones, redirige a
/notifications - si hay contenido revisable, aparecerá una bandera roja y redirigirá a
/review
- si hay notificaciones, redirige a
notificationMenu (Menú de notificaciones)
-
si la opción “No molestar” está activa, el icono de la campana cambiará a un icono de campana tachada y el tiempo restante de “No molestar” aparecerá

-
abre el menú de notificaciones
search (Búsqueda)
- redirige a la página de búsqueda contextual
/search
Configuración
He intentado hacer la configuración lo más sencilla posible.
Contendrá cuatro campos.
- name (Nombre): Esto es solo para identificar más fácilmente la pestaña en la configuración.
- icon (Icono): Añade un icono a la pestaña. Nota: Si seleccionas una función, puede haber iconos que no se puedan anular con esta configuración.
- destination (Destino): Añade un destino para tu pestaña personalizada. Nota: Si seleccionas una función que gestionará el destino, puedes dejarlo vacío. El componente convierte automáticamente los destinos
/my/...a/u/username/...para que el estado activo de las pestañas se pueda añadir correctamente. - function (Función): Elige una función para la pestaña.
Los administradores pueden crear/eliminar/cambiar pestañas simplemente 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 así.
Créditos: Barra de pestañas de Discourse para móviles y gracias a todos por los comentarios en el tema Concepto de componente de tema F NAV. ![]()


















