Ajuda:Guia de Estilo: mudanças entre as edições

Edição das 04h37min de 30 de novembro de 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 (Obrigatório)

Toda página deve iniciar com o componente de cabeçalho para gerar o breadcrumb (navegação) e o título padrão.

Opção A: Padrão (Manuais)

Gera a caixa azul com título. Ideal para documentações.

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

Opção B: Invisível (Dashboards)

Gera apenas o breadcrumb. Use em páginas com design personalizado.

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

2. Caixas de Aviso (Notas)

Use o template


 Nota

para destacar informações. Agora possuímos 4 cores semânticas.

Sintaxe

{{Nota | TIPO | TÍTULO | Seu texto aqui... }}

Tipos Disponíveis

INFO (Padrão)

Use para dicas gerais ou informações complementares. (Se não informar o tipo, este será usado).

{{Nota|info|DICA|Texto da dica...}}

SUCESSO / NOVIDADE

Use para indicar novas funcionalidades ou boas práticas recomendadas.

{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}

ATENÇÃO

Use para alertas que requerem cuidado do usuário, mas não são críticos.

{{Nota|warning|ATENÇÃO|Verifique o cadastro antes de salvar...}}

CUIDADO / CRÍTICO

Use para riscos de perda de dados, bloqueios ou ações irreversíveis.

{{Nota|danger|IMPORTANTE|Não desligue o servidor durante o processo...}}

3. Tabelas de Campos (Data Grid)

Substitua as tabelas manuais pelo componente



 Campo / Parâmetro
 Função e Instruções

. Ele padroniza a largura (30% campo / 70% descrição) e as cores.

Sintaxe Básica

Para textos curtos e simples.

{{TabelaCampos|
  {{Linha| Nome do Campo | Explicação do que deve ser preenchido. }}
}}

Sintaxe Segura (Anti-Bug)

RECOMENDADO

{{TabelaCampos|
  {{Linha
   | 1= Nome do Campo
   | 2= Explicação longa que permite:
* Listas com marcadores
* Quebras de linha
   }}
}}

Resultado Visual

Campo / Parâmetro	Função e Instruções
Data Inicial	Informe a data de início do relatório.
Cliente	Selecione o cliente ou deixe em branco para todos.

4. Cards e Grids (Layout)

Use para criar menus visuais, dashboards ou agrupar informações lado a lado.

4.1. Cards Básicos

Use


 {{{titulo}}}

{{{texto}}}

para blocos simples de texto.

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

4.2. Menus de Navegação (CardMenu)

Use


 {{{titulo}}}

{{{conteudo}}}

para criar listas de links com acentos coloridos. Ideal para Hubs de conteúdo.

Cores disponíveis: blue, dark, orange, green, red.

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

IMPORTANTE

Ao usar o CardMenu, os asteriscos (*) da lista devem estar colados na margem esquerda, sem espaços antes.

Resultado Visual:

Favoritos

4.3. Grid de 2 Colunas Fixas

Por padrão, a grid divide em 3 ou 4 colunas dependendo da tela. Para forçar 2 colunas grandes, adicione a classe celta-grid-2.

<div class="celta-grid celta-grid-2">
  {{Card...}}
  {{Card...}}
</div>

5. Imagens e Badges

Prints de Tela

Padroniza o tamanho e a borda das imagens.

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

Badges (Etiquetas)

Use ao lado de títulos para destacar versões.

== Instalação {{Badge|novo|v15.2}} ==

Resultado: Instalação v15.2

6. Template Base (Copiar e Colar)

Use este código para iniciar uma nova página de manual rapidamente. Ele já usa a sintaxe segura.

{{Cabecalho
 | [[Módulo]] › [[Funcionalidade]]
 | Título do Manual
}}

Breve resumo sobre o que é esta funcionalidade e para que ela serve.

{{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
   | tipo=check
   | 1= Nome do Checkbox
   | 2= Explicação do que essa opção faz.
  }}
  {{Linha
   | 1= Outro Campo
   | 2= Descrição do campo.
  }}
}}

== 3. Passo a Passo ==
# Clique em '''Incluir''';
# Preencha os dados conforme a tabela acima;
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
# Clique em '''Gravar'''.

{{Nota|success|DICA|Você pode usar a tecla F5 para gravar rapidamente.}}

7. Layout Tela Cheia (Sem Sidebar)

Para páginas como a Home ou Dashboards que não precisam de índice lateral, envolva todo o conteúdo da página nesta div:

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

8. Menu Lateral Estilo Sistema

Para criar uma barra lateral branca com botões idênticos ao sistema Celta, use esta estrutura HTML dentro de um container flexível:

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