 |
Resumo | Submenus do Cabeçalho permitem criar um menu de cabeçalho com submenus usando apenas texto! |
 |
Pré-visualização | Pré-visualizar no Discourse Theme Creator |
 |
Link do Repositório | https://github.com/discourse/discourse-header-submenus |
 |
Novo em Temas do Discourse? | Guia para iniciantes sobre o uso de Temas do Discourse |
Instale este componente de tema
Funcionalidades
Desktop
Mobile
Configurações
| Nome | Descrição |
|---|---|
| Itens do menu | Adicione itens ao menu. Um item por linha nesta ordem: Texto, ícone, título, visualização. |
| Itens do submenu | Adicione itens ao submenu. Um item por linha nesta ordem: Pai, texto, ícone, URL, alvo, título. |
| Ícones SVG | Inclua classes de ícones FontAwesome para cada ícone usado nas listas acima. |
| Modo fixo | Force o menu a permanecer visível no topo da tela, independentemente da posição de rolagem - Apenas Desktop |
| Mostrar seta | Exibir ícones de seta ao lado dos itens do menu |
| Inverter posição | Exibir itens do menu no lado oposto da tela |
| Fundo do menu | Cor de fundo do menu. (hex, rgb, rgba ou nome de cor CSS) |
| Cor do item do menu | Cor dos itens do menu. (hex, rgb, rgba ou nome de cor CSS) |
| Menu-item-active-background | Cor de fundo dos itens do menu quando ativos. (hex, rgb, rgba ou nome de cor CSS) |
| Menu-item-active-color | Cor dos itens do menu quando ativos. (hex, rgb, rgba ou nome de cor CSS) |
| Fundo do submenu | Cor de fundo dos submenus. (hex, rgb, rgba ou nome de cor CSS) |
| Cor do item do submenu | Cor dos itens do submenu. (hex, rgb, rgba ou nome de cor CSS) |
| Fundo ao passar o mouse no item do submenu | Cor de fundo dos itens do submenu ao passar o mouse. (hex, rgb, rgba ou nome de cor CSS) |
| Cor ao passar o mouse no item do submenu | Cor dos itens do submenu ao passar o mouse. (hex, rgb, rgba ou nome de cor CSS) |
| Cor do separador | Cor das linhas separadoras nos submenus. (hex, rgb, rgba ou nome de cor CSS) |
Existem quatro grupos de configurações
-
Itens do menu
Insira os itens que deseja que apareçam no menu. Um item separado por vírgula por linha nesta ordem
Texto, ícone, título, visualizaçãoTexto: o que aparece no menu.
Ícone: o ícone exibido ao lado do item. Se não desejar usar um ícone, usenone.
Título: o texto que aparece ao passar o mouse sobre o item.
Visualização: Escolha em quais dispositivos o item aparecerá.vdmaparece tanto no desktop quanto no mobile
vdoaparece apenas em desktops,
vmoaparece apenas em mobiles.Devido à falta de espaço, não é recomendado adicionar mais de 3-4 itens no mobile.
-
Itens do submenu
Insira uma lista dos itens do submenu que deseja adicionar ao seu menu. Um item separado por vírgula por linha nesta ordem
Pai, texto, ícone, URL, alvo, títuloPai: o nome do item do menu pai sob o qual este item do submenu deve aparecer. Use o valor
textoda lista acima.
Texto: o texto que aparece para este item do submenu.
Ícone: o ícone para este item do submenu; usenonese nenhum ícone for necessário.
URL: o caminho para o qual este item do menu leva. Você também pode usar caminhos relativos.
Alvo: Escolha se este item será aberto em uma nova aba ou na mesma aba. Useblankpara abrir o link em uma nova aba, ou useselfpara abri-lo na mesma aba.
Título: o texto que aparece ao passar o mouse sobre o item.
Separadores: Você também pode adicionar separadores entre itens do submenu. Para adicionar um separador, usepai, divider.
Aqui está um exemplo rápido para cobrir os pontos 1 e 2 acima:
Digamos que eu queira adicionar um item de menu chamado Design e adicionar alguns itens ao seu submenu assim
Primeiro, eu inseriria isso como um menu_item
Design, magic, Get inspired!, vdm
E então inseriria estes como itens sub_menu
Design, Galleries, th, #, blank, Cool galleries for you to look at.
Design, Design process, lightbulb-o, #, blank, Learn the basics.
Design, Blog design, columns, #, blank, What makes for a great blog?
Design, divider
Design, Freebies, gift, #, blank, Everyone likes freebies!
Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.
Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!
É isso!
O tema vem com um menu de exemplo por padrão, então dê uma olhada nele e pergunte se tiver dúvidas.
-
Opções de layout.
Estas são bastante autoexplicativas
-
Opções de cor
Estas estão vazias por padrão, mas se você adicionar uma cor aqui, ela substituirá os padrões do componente, que são baseados no esquema de cores atual.
Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.
thanks a lot!
