Ajuda:Guia de Estilo: mudanças entre as edições
De Celta Sistemas Wiki
Mais ações
Sem resumo de edição |
|||
| Linha 4: | Linha 4: | ||
}} | }} | ||
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. | |||
__TOC__ | __TOC__ | ||
| Linha 164: | Linha 164: | ||
* [[Página principal|Link Exemplo 1]] | * [[Página principal|Link Exemplo 1]] | ||
* [[Página principal|Link Exemplo 2]] | * [[Página principal|Link Exemplo 2]] | ||
}} | |||
</div> | |||
=== 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. | |||
<pre><nowiki> | |||
<div class="celta-grid"> | |||
{{CardLista | |||
| icone = bi-lightning-fill | |||
| cor = #f59e0b | |||
| titulo = Acesso Rápido | |||
| conteudo = | |||
* [[Link 1]] | |||
* [[Link 2]] | |||
}} | |||
</div> | |||
</nowiki></pre> | |||
'''Resultado:''' | |||
<div class="celta-grid"> | |||
{{CardLista | |||
| icone = bi-lightning-fill | |||
| cor = #f59e0b | |||
| titulo = Acesso Rápido | |||
| conteudo = | |||
* [[Página principal|Link 1]] | |||
* [[Página principal|Link 2]] | |||
}} | }} | ||
</div> | </div> | ||
| Linha 171: | Linha 201: | ||
== 5. Ícones == | == 5. Ícones == | ||
O Wiki utiliza a biblioteca '''Bootstrap Icons''': [https://icons.getbootstrap.com/ Galeria Oficial]. | |||
* **Uso em Cards:** Passe o nome da classe no parâmetro `icone` (Ex: `icone = bi-gear`). | |||
* **Uso no Texto:** Use a tag `<i>`: | |||
*: ` <i class="bi bi-check-circle"></i> ` -> <i class="bi bi-check-circle"></i> | |||
---- | ---- | ||
| Linha 180: | Linha 211: | ||
== 6. Imagens e Badges == | == 6. Imagens e Badges == | ||
=== Prints de Tela === | === 6.1. Prints de Tela === | ||
<pre><nowiki> | <pre><nowiki> | ||
| Linha 186: | Linha 217: | ||
</nowiki></pre> | </nowiki></pre> | ||
=== Etiquetas de Versão === | === 6.2. Etiquetas de Versão === | ||
<pre><nowiki> | <pre><nowiki> | ||
| Linha 195: | Linha 226: | ||
Funcionalidade Nova {{Badge|novo|v15.0}} | Funcionalidade Nova {{Badge|novo|v15.0}} | ||
=== 6.3. Logo Oficial (SVG) === | |||
Exibe a logo vetorizada do sistema. | |||
* **Uso:** `{{Logo|width=200px}}` | |||
'''Resultado:''' | |||
{{Logo|width=200px}} | |||
---- | ---- | ||
Edição atual tal como às 21h26min de 1 de dezembro de 2025
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:
DICA
Texto da dica ou informação complementar.
Tipo: Sucesso / Novidade
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}
Resultado:
SUCESSO
Para novidades ou boas práticas.
Tipo: Atenção / Alerta
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}
Resultado:
ATENÇÃO
Alertas que requerem cuidado.
Tipo: Crítico / Erro
{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}
Resultado:
CRÍTICO
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:
Dicas
Texto do card...
Manual
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:
Favoritos
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:
Contato
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}}