Ajuda:Guia de Estilo

Início /

Guia de Estilo e Padrões

Atualizado em: 01/12/2025

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:

Início / Módulo Pai › Sub-rotina

Título da Página de *Exemplo*

Atualizado em: 01/12/2025

Invisível (Dashboards e Hubs)

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

Resultado:

Início / Invisível (Dashboards e Hubs)

---

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: Item A Item B

---

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

• Link Exemplo 1
• Link Exemplo 2

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:

Acesso Rápido

• Link 1
• Link 2

---

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:

Precisando de ajuda?

Fale com nosso suporte via e-mail ou WhatsApp.

E-mail → Suporte

WhatsApp → Suporte

Celta Sistemas

Financeiro / Comercial

{{ContatoFinanceiro}}

Resultado:

Contato

Email

[email protected]

WhatsApp

(66) 3515-0001

Site

celtasistemas.com.br

---

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