Ajuda:Guia de Estilo

Início /

Guia de Estilo e Padrões

Atualizado em: 01/12/2025

Use este guia para copiar os códigos dos componentes oficiais.

1. Cabeçalho da Página

Use sempre na primeira linha da página.

Exemplo Padrão (Manuais e Tutoriais)

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

Resultado:

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

Título da Página

Atualizado em: 01/12/2025

Invisível (Dashboards e Hubs)

{{Cabecalho | [[Módulo Pai]] | no}}

Resultado:

Início / Módulo Pai

---

2. Caixas de Aviso (Notas)

Sintaxe:

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

---

5. Imagens e Badges

Prints de Tela

{{Print|Nome_do_Arquivo.png|Legenda da imagem}}

Etiquetas de Versão

Funcionalidade Nova {{Badge|novo|v15.0}}

Resultado:

Funcionalidade Nova v15.0

---

6. 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

---

7. Layouts Especiais

Tela Cheia (Sem barra lateral)

<div class="celta-full-width">
   ... conteúdo da página ...
</div>

Menu Lateral (Estilo Sistema)

<div class="celta-sys-menu">
  <div class="celta-sys-header">Menu</div>
  <div style="display:flex; flex-direction:column;">
    [[Link|<span class="celta-sys-btn"><i class="bi bi-house"></i> Botão 1</span>]]
  </div>
</div>

Resultado:

Menu

    Botão 1

---

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