| Resumo | F NAV - Abas de Navegação para Celular | |
| Pré-visualização | Theme Creator | |
| Repositório | GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub | |
| Achei útil? | > ./support --coffee | |
| 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 |
Instalar este componente de tema
Olá ![]()
Anteriormente, criei um tópico Development aqui para ele como um conceito de componente de tema e agora ele está em um estado para ser um Customization > Theme component.
Por favor, tenha certeza de testá-lo antes do uso em produção.
Algumas informações sobre o componente: F NAV - Theme component concept
Sobre o componente de tema. Li muitos posts dizendo que seria maravilhoso tornar a Barra de Abas do Discourse para Celular mais dinâmica e adicionar a capacidade de lidar, por exemplo, com notificações, etc… O F-NAV pode fazer isso e muito mais…
Cabeçalho
Ele oculta o menu hambúrguer, o menu do usuário, a busca e o chat e adiciona um botão de menu de perfil (avatar) que contém o conteúdo da aba de perfil padrão 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.
Há algumas configurações para mostrar/ocultar os ícones padrão do cabeçalho, o que é útil quando você não deseja 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
- alterna o ícone da aba inicial nas rotas de tópicos para uma seta para a esquerda, o 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 ativado ou se o usuário desativá-lo nas configurações do usuário.
A bolha de notificações muda conforme for urgente ou não.
Notificações urgentes da aba multi são verdes e parecem assim. ![]()
Expandido
Mensagem pessoal é sempre verde, mas o chat pode ser azul, como originalmente, por exemplo, para 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 visualização rápida
chat
- adiciona o botão de chat com suas funções
notificationToRoute
-
se o modo não perturbar estiver ativo, o ícone do sino mudará para o ícone de sino com barra e o horário até o qual o modo não perturbar está ativo será exibido

-
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 revisável, uma bandeira vermelha aparecerá e redirecionará para
/review
- se houver notificação, redireciona para
notificationMenu
-
se o modo não perturbar estiver ativo, o ícone do sino mudará para o ícone de sino com barra e o horário até o qual o modo não perturbar está ativo será exibido

-
abre o menu de notificações
search
- redireciona para a página
/searchbaseada no contexto
Configurações
Tentei tornar as configurações o mais simples possível.
Ela conterá quatro campos.
- name: Isso é apenas para facilitar a identificação da 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, ela tratará do destino, então você pode deixá-lo vazio. O componente trata automaticamente os destinos
/my/..., convertendo-os 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ópico ficará simplesmente assim.
Crédito: Discourse Tab Bar for Mobile e obrigado a todos pelos feedbacks no tópico F NAV - Theme component concept. ![]()


















