Ajuda:Guia de Estilo

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.

Padrão (Manuais e Tutoriais)

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

Invisível (Dashboards e Hubs)

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

2. Caixas de Aviso (Notas)

Sintaxe:


  TÍTULO 

Texto...

Tipos Disponíveis

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

DICA

Texto da dica ou informação complementar.

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

SUCESSO

Para novidades ou boas práticas.

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

ATENÇÃO

Alertas que requerem cuidado.

{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}

CRÍTICO

Risco de perda de dados ou bloqueios.

3. Tabela de Campos

Use para listar parâmetros de configuração.

**Dica:** Use `1=` e `2=` para evitar erros se o texto tiver quebra de linha ou listas.

Código:

{{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 Visual:

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

Para destacar textos lado a lado.

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

Para criar listas de links com ícones coloridos.

**Cores:** `blue`, `dark`, `orange`, `green`, `red`.
**Atenção:** Os asteriscos (*) devem ficar colados na esquerda.

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

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)

Código:








Precisando de ajuda?

Fale com nosso suporte via e-mail ou WhatsApp.





E-mail → Suporte



WhatsApp → Suporte



Celta Sistemas

Financeiro / Comercial

Código:


 Contato




Email
[email protected]




WhatsApp
(66) 3515-0001




Site
celtasistemas.com.br

Contato

Email

[email protected]

(66) 3515-0001

Site

celtasistemas.com.br

7. Layouts Especiais

Tela Cheia (Sem barra lateral)

Para usar na Home Page ou páginas de Menu Principal.

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

Menu Lateral (Estilo Sistema)

Para imitar o menu do ERP.

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

8. Template Base (Copiar e Colar)

Copie este bloco para iniciar uma nova página de manual.

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

Guia de Estilo e Padrões