| Resumen | F NAV - Pestañas de navegación móvil | |
| Vista previa | Theme Creator | |
| Repositorio | GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs | |
| 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 |
Instalar este componente de tema
Hola ![]()
Antes, he creado un tema Dev tema para ello como concepto de componente de tema y ahora está en un estado para ser un Theme component.
Asegúrate de probarlo antes de usarlo en producción.
Alguna información aquí sobre el componente: F NAV - Theme component concept
Sobre el componente de tema. He leído muchas publicaciones sobre lo maravilloso que sería hacer la Barra de pestañas de Discourse para móviles más dinámica y añadir la capacidad de manejar, 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 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 del encabezado, lo cual es útil cuando no quieres colocar la pestaña exacta en F NAV, de modo que se mostrará en el encabezado.
Pestañas
Es posible asociar diferentes funciones a 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 hacia la izquierda que añade una función de retroceso

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

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 del usuario.
La burbuja de notificaciones cambia según si es urgente o no.
Las notificaciones urgentes de la pestaña multi son verdes y se ven así. ![]()
Expandido
El mensaje personal es siempre verde, pero el chat puede ser azul como originalmente, por ejemplo, una notificación de mensaje de canal no leído.
Expandido
Notificación única
message
- añade un botón de mensaje con notificaciones y al hacer clic en él se abre un modal de mensajes para una vista rápida
chat
- añade un botón de chat con sus funciones
notificationToRoute
-
si no molestar está activo, el icono de la campana cambiará a un icono de campana tachada y aparecerá el tiempo de no molestar hasta

-
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 señal de advertencia y redirigirá a
/review
- si hay una notificación, redirige a
notificationMenu
-
si no molestar está activo, el icono de la campana cambiará a un icono de campana tachada y aparecerá el tiempo de no molestar hasta

-
abre el menú de notificaciones
search
- redirige a la página
/searchbasada en el contexto
Configuración
Intenté que la configuración fuera lo más sencilla posible.
Contendrá cuatro campos.
- name: Esto es solo para identificar fácilmente la pestaña en la configuración.
- icon: Añade un icono a la pestaña. Nota: Si seleccionas una función, puede haber 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 que maneje el destino, puedes dejarlo vacío. El componente maneja automáticamente las destinos
/my/...convirtiéndolos a/u/username/...para que el estado activo de las pestañas se pueda añadir correctamente. - function: Elige una función para la pestaña.
Los administradores pueden crear/eliminar/cambiar pestañas fácilmente y seleccionar entre 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 simplemente se verá así.
Crédito: 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. ![]()


















