Ajuda:Guia de Estilo
Mais ações
Guia de Estilo e Padrões
Este guia documenta os componentes visuais do Celta Wiki Framework. Utilize estes padrões para manter a consistência, agilidade e beleza da documentação.
1. Cabeçalho da Página
Use sempre na primeira linha da página.
Exemplo Padrão (Manuais e Tutoriais)
{{Cabecalho
| [[Tutoriais]] › [[Sub-rotina]]
| Título da Página de *Exemplo*
}}
Resultado:
Título da Página de *Exemplo*
Invisível (Dashboards e Hubs)
{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}
Resultado:
2. Caixas de Aviso (Notas)
Sintaxe:
{{Nota | tipo | TÍTULO | Texto...}}
Tipo: Dica / Informação
{{Nota|info|DICA|Texto da dica ou informação complementar.}}
Resultado:
Texto da dica ou informação complementar.
Tipo: Sucesso / Novidade
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}
Resultado:
Para novidades ou boas práticas.
Tipo: Atenção / Alerta
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}
Resultado:
Alertas que requerem cuidado.
Tipo: Crítico / Erro
{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}
Resultado:
Risco de perda de dados ou bloqueios.
3. Tabela de Campos
Use para listar parâmetros. Utilize `1=` e `2=` para evitar quebras.
Exemplo de Tabela
{{TabelaCampos|
{{Linha
| 1= Nome do Campo
| 2= Explicação do campo.
}}
{{Linha
| 1= Outro Parâmetro
| 2= Explicação com lista:
* Item A
* Item B
}}
}}
Resultado:
| Campo / Parâmetro | Função e Instruções |
|---|---|
| Nome do Campo | Explicação do campo. |
| Outro Parâmetro | Explicação com lista:
|
4. Cards e Menus
4.1. Cards Simples
<div class="celta-grid">
{{Card | titulo=Dicas | texto=Texto do card...}}
{{Card | titulo=Manual | texto=Texto do card...}}
</div>
Resultado:
Texto do card...
Texto do card...
4.2. Menus de Navegação (Hubs)
Cores: `blue`, `dark`, `orange`, `green`, `red`.
<div class="celta-grid">
{{CardMenu
| cor = orange
| icone = bi-star
| titulo = Favoritos
| conteudo =
* [[Link 1]]
* [[Link 2]]
}}
</div>
Resultado:
4.3. Listas de Links (CardLista)
Usado para listas limpas sem borda colorida (Ex: Acesso Rápido).
- **Atenção:** Os asteriscos (*) devem ficar colados na margem esquerda.
<div class="celta-grid">
{{CardLista
| icone = bi-lightning-fill
| cor = #f59e0b
| titulo = Acesso Rápido
| conteudo =
* [[Link 1]]
* [[Link 2]]
}}
</div>
Resultado:
5. Ícones
O Wiki utiliza a biblioteca Bootstrap Icons: Galeria Oficial.
- **Uso em Cards:** Passe o nome da classe no parâmetro `icone` (Ex: `icone = bi-gear`).
- **Uso no Texto:** Use a tag ``:
- ` ` ->
6. Imagens e Badges
6.1. Prints de Tela
{{Print|Nome_do_Arquivo.png|Legenda da imagem}}
6.2. Etiquetas de Versão
Funcionalidade Nova {{Badge|novo|v15.0}}
Resultado:
Funcionalidade Nova v15.0
6.3. Logo Oficial (SVG)
Exibe a logo vetorizada do sistema.
- **Uso:** ``
Resultado:
7. Rodapé de Contato
Adicione apenas o código abaixo no final das páginas.
Suporte Técnico (Padrão)
{{ContatoSuporte}}
Resultado:
Financeiro / Comercial
{{ContatoFinanceiro}}
Resultado:
8. Template Base (Copiar e Colar)
Copie este bloco para iniciar uma nova página.
{{Cabecalho
| [[Módulo]] › [[Funcionalidade]]
| Título do Manual
}}
Resumo da funcionalidade.
{{Nota|info|PRÉ-REQUISITO|Necessário estar na versão 15.0 ou superior.}}
== 1. Visão Geral ==
Explicação do conceito...
== 2. Configuração ==
Acesse o menu '''Cadastro > Operações'''.
{{TabelaCampos|
{{Linha
| 1= Nome do Campo
| 2= Explicação do campo.
}}
}}
== 3. Passo a Passo ==
# Clique em '''Incluir''';
# Preencha os dados;
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
# Clique em '''Gravar'''.
{{ContatoSuporte}}