| Resumo | F NAV - Abas de Navegação do Mobile | |
| Prévia | Theme Creator | |
| Repositório | GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs | |
| Guia de Instalação | Como instalar um tema ou componente de tema | |
| Novo em Temas do Discourse? | Guia para iniciantes no uso de Temas do Discourse |
Instale este componente de tema
Olá ![]()
Antes, eu criei um tópico Dev tópico para ele como um conceito de componente de tema e agora ele está em um estado para ser um Theme component.
Por favor, certifique-se de testá-lo antes de usar em produção.
Algumas informações aqui sobre o componente: F NAV - Theme component concept
Sobre o componente de tema. Li tantos posts sobre isso que seria maravilhoso tornar a Barra de Abas do Discourse para Mobile mais dinâmica e adicionar a capacidade de lidar com, por exemplo, notificações etc… O F-NAV pode fazer isso e mais…
Cabeçalho
Ele oculta o hambúrguer, menu do usuário, pesquisa e chat e adiciona um botão de menu de perfil (avatar) que contém o conteúdo padrão da aba de perfil do menu do usuário.
Configurações
Ele também contém uma configuração onde você pode adicionar itens personalizados antes do item Sair.
Ele contém três campos onde você pode facilmente adicionar itens personalizados.
Existem algumas configurações para mostrar/ocultar os ícones padrão do cabeçalho, o que é útil quando você não quer colocar a aba exata no F NAV, para que ela seja exibida no cabeçalho.
Abas
É possível associar diferentes funções às abas. Essas funções permitem que cada aba mude dinamicamente.

Essas mudanças incluem:
Funções
home
- muda o ícone da aba inicial em rotas de tópicos para uma seta para a esquerda que adiciona uma função de voltar

- adiciona um ponto indicador de tópico novo ou não lido

hamburger (abre o menu hambúrguer)
multi
aba multi
A aba multi muda automaticamente para a aba de mensagens se o chat não estiver habilitado ou se o usuário o desativar nas configurações do usuário.
A bolha de notificações muda dependendo se é urgente ou não.
As notificações urgentes da aba multi são verdes e ficam assim. ![]()
Expandido
A mensagem pessoal é sempre verde, mas o chat pode ser azul como originalmente, por exemplo, uma notificação de mensagem de canal não lida.
Expandido
Notificação única
message
- adiciona um botão de mensagem com notificações e clicar nele abre um modal de mensagens para uma visualização rápida
chat
- adiciona um botão de chat com suas funções
notificationToRoute
-
se o “não perturbe” estiver ativo, o ícone do sino mudará para o ícone de sino cortado e o tempo de “não perturbe até” aparecerá

-
redireciona para a página de notificações do perfil, ignorando o menu de notificações
- se houver notificação, redireciona para
/notifications?filter=unread - se não houver notificação, redireciona para
/notifications - se houver conteúdo para revisão, uma bandeira vermelha aparecerá e redirecionará para
/review
- se houver notificação, redireciona para
notificationMenu
-
se o “não perturbe” estiver ativo, o ícone do sino mudará para o ícone de sino cortado e o tempo de “não perturbe até” aparecerá

-
abre o menu de notificações
search
- redireciona para a página
/searchbaseada em contexto
Configurações
Tentei tornar as configurações o mais simples possível.
Elas conterão quatro campos.
- name: Isso é apenas para identificar mais facilmente a aba nas configurações.
- icon: Adiciona um ícone à aba. Nota: Se você selecionar uma função, pode haver ícones que não podem ser substituídos por esta configuração.
- destination: Adiciona um destino para sua aba personalizada. Nota: Se você selecionar uma função que cuidará do destino, pode deixá-lo em branco. O componente lida com os destinos
/my/...convertendo-os automaticamente para/u/username/..., para que o status ativo das abas possa ser adicionado corretamente. - function: Escolha uma função para a aba.
Os administradores podem simplesmente criar/remover/alterar abas e selecionar uma das funções ou adicionar um destino personalizado à aba.
Funções ![]()
Por exemplo, adicionar uma aba de criação de tópicos ficará simplesmente assim.
Crédito: Discourse Tab Bar for Mobile e obrigado a todos pelos feedbacks no tópico F NAV - Theme component concept. ![]()


















