Exibir código-fonte para Ajuda:Guia de Estilo

{{Cabecalho
 |
 | 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.

__TOC__

== 1. Cabeçalho da Página ==
Use sempre na primeira linha da página.

=== Exemplo Padrão (Manuais e Tutoriais) ===

<pre><nowiki>
{{Cabecalho
 | [[Tutoriais]] › [[Sub-rotina]]
 | Título da Página de *Exemplo*
}}
</nowiki></pre>

'''Resultado:'''

{{Cabecalho
 | [[Módulo Pai]] › [[Sub-rotina]]
 | Título da Página de *Exemplo*
}}

=== Invisível (Dashboards e Hubs) ===

<pre><nowiki>
{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}
</nowiki></pre>

'''Resultado:'''

{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}

----

== 2. Caixas de Aviso (Notas) ==
Sintaxe: 
<pre><nowiki>
{{Nota | tipo | TÍTULO | Texto...}}
</nowiki></pre>

=== Tipo: Dica / Informação ===

<pre><nowiki>
{{Nota|info|DICA|Texto da dica ou informação complementar.}}
</nowiki></pre>

'''Resultado:'''
{{Nota|info|DICA|Texto da dica ou informação complementar.}}

=== Tipo: Sucesso / Novidade ===

<pre><nowiki>
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}
</nowiki></pre>

'''Resultado:'''
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}

=== Tipo: Atenção / Alerta ===

<pre><nowiki>
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}
</nowiki></pre>

'''Resultado:'''
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}

=== Tipo: Crítico / Erro ===

<pre><nowiki>
{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}
</nowiki></pre>

'''Resultado:'''
{{Nota|danger|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 ===

<pre><nowiki>
{{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
  }}
}}
</nowiki></pre>

'''Resultado:'''

{{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
  }}
}}

----

== 4. Cards e Menus ==

=== 4.1. Cards Simples ===

<pre><nowiki>
<div class="celta-grid">
  {{Card | titulo=Dicas | texto=Texto do card...}}
  {{Card | titulo=Manual | texto=Texto do card...}}
</div>
</nowiki></pre>

'''Resultado:'''

<div class="celta-grid">
  {{Card | titulo=Dicas | texto=Texto do card...}}
  {{Card | titulo=Manual | texto=Texto do card...}}
</div>

=== 4.2. Menus de Navegação (Hubs) ===
Cores: `blue`, `dark`, `orange`, `green`, `red`.

<pre><nowiki>
<div class="celta-grid">
{{CardMenu
 | cor = orange
 | icone = bi-star
 | titulo = Favoritos
 | conteudo = 
* [[Link 1]]
* [[Link 2]]
}}
</div>
</nowiki></pre>

'''Resultado:'''

<div class="celta-grid">
{{CardMenu
 | cor = orange
 | icone = bi-star
 | titulo = Favoritos
 | conteudo = 
* [[Página principal|Link Exemplo 1]]
* [[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>

----

== 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>

----

== 6. Imagens e Badges ==

=== 6.1. Prints de Tela ===

<pre><nowiki>
{{Print|Nome_do_Arquivo.png|Legenda da imagem}}
</nowiki></pre>

=== 6.2. Etiquetas de Versão ===

<pre><nowiki>
Funcionalidade Nova {{Badge|novo|v15.0}}
</nowiki></pre>

'''Resultado:'''

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}}

----

== 7. Rodapé de Contato ==
Adicione apenas o código abaixo no final das páginas.

=== Suporte Técnico (Padrão) ===

<pre><nowiki>
{{ContatoSuporte}}
</nowiki></pre>

'''Resultado:'''

{{ContatoSuporte}}

=== Financeiro / Comercial ===

<pre><nowiki>
{{ContatoFinanceiro}}
</nowiki></pre>

'''Resultado:'''

{{ContatoFinanceiro}}

----

== 8. Template Base (Copiar e Colar) ==
Copie este bloco para iniciar uma nova página.

<pre><nowiki>
{{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}}
</nowiki></pre>