Ativa a pesquisa
Ativa o menu
134
292
9
2,7 mil
Celta Sistemas Wiki
Alternar menu de preferências
Alternar menu pessoal
Não autenticado(a)
Your IP address will be publicly visible if you make any edits.

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

De Celta Sistemas Wiki
Mais ações
← Edição anteriorEdição posterior →
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
{{Cabecalho
{{Cabecalho
  |
  |
  | Guia de Estilo e Padrões de Edição
  | 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.
Use este guia para copiar os códigos dos componentes oficiais.


__TOC__
__TOC__


== 1. Cabeçalho (Obrigatório) ==
== 1. Cabeçalho da Página ==
Toda página deve iniciar com o componente de cabeçalho para gerar o breadcrumb (navegação) e o título padrão.
Use sempre na primeira linha da página.


<div class="celta-grid" style="grid-template-columns: 1fr 1fr;">
=== Padrão (Manuais e Tutoriais) ===
<div class="celta-card">
<div class="celta-card-header">Opção A: Padrão (Manuais)</div>
<div class="celta-card-body">
Gera a caixa azul com título. Ideal para documentações.
<pre>
<pre>
{{Cabecalho
{{Cabecalho
Linha 22: Linha 18:
}}
}}
</pre>
</pre>
</div>
</div>


<div class="celta-card">
=== Invisível (Dashboards e Hubs) ===
<div class="celta-card-header">Opção B: Invisível (Dashboards)</div>
<div class="celta-card-body">
Gera apenas o breadcrumb. Use em páginas com design personalizado.
<pre>
<pre>
{{Cabecalho
{{Cabecalho | [[Módulo Pai]] | no}}
| [[Módulo Pai]]
| no
}}
</pre>
</pre>
</div>
</div>
</div>


----
----


== 2. Caixas de Aviso (Notas) ==
== 2. Caixas de Aviso (Notas) ==
Use o template <code>{{Nota}}</code> para destacar informações. Agora possuímos 4 cores semânticas.
Sintaxe: <code>{{Nota | tipo | TÍTULO | Texto...}}</code>
 
=== Sintaxe ===
<pre>{{Nota | TIPO | TÍTULO | Seu texto aqui... }}</pre>


=== Tipos Disponíveis ===
=== Tipos Disponíveis ===


{{Nota|info|INFO (Padrão)|Use para dicas gerais ou informações complementares.}}
<pre>{{Nota|info|DICA|Texto da dica ou informação complementar.}}</pre>
<pre>{{Nota|info|DICA|Texto da dica...}}</pre>
{{Nota|info|DICA|Texto da dica ou informação complementar.}}


{{Nota|success|SUCESSO|Use para indicar novas funcionalidades ou boas práticas.}}
<pre>{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}</pre>
<pre>{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}</pre>
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}


{{Nota|warning|ATENÇÃO|Use para alertas que requerem cuidado do usuário.}}
<pre>{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}</pre>
<pre>{{Nota|warning|ATENÇÃO|Verifique o cadastro antes de salvar...}}</pre>
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}


{{Nota|danger|CRÍTICO|Use para riscos de perda de dados ou bloqueios.}}
<pre>{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}</pre>
<pre>{{Nota|danger|IMPORTANTE|Não desligue o servidor...}}</pre>
{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}


----
----


== 3. Tabelas de Campos (Data Grid) ==
== 3. Tabela de Campos ==
Substitua as tabelas manuais pelo componente <code>{{TabelaCampos}}</code>.
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.
=== Sintaxe Básica ===
<pre>
{{TabelaCampos|
  {{Linha| Nome do Campo | Explicação do que deve ser preenchido. }}
}}
</pre>
 
=== Sintaxe Segura (Anti-Bug) ===
{{Nota|warning|RECOMENDADO|Se você precisar quebrar linhas ou usar listas dentro da tabela, use '''1=''' e '''2=''' para evitar erros.}}


'''Código:'''
<pre>
<pre>
{{TabelaCampos|
{{TabelaCampos|
   {{Linha
   {{Linha
   | 1= Nome do Campo
   | 1= Nome do Campo
   | 2= Explicação longa que permite:
   | 2= Explicação do campo.
* Listas com marcadores
  }}
* Quebras de linha
  {{Linha
  }}
  | 1= Outro Parâmetro
  | 2= Explicação com lista:
* Item A
* Item B
  }}
}}
}}
</pre>
</pre>


=== Resultado Visual ===
'''Resultado Visual:'''
{{TabelaCampos|
{{TabelaCampos|
   {{Linha|Data Inicial|Informe a data de início do relatório.}}
   {{Linha|1=Nome do Campo|2=Explicação do campo.}}
   {{Linha|Cliente|Selecione o cliente ou deixe em branco para todos.}}
   {{Linha|1=Outro Parâmetro|2=Explicação com lista:
* Item A
* Item B
}}
}}
}}


----
----


== 4. Cards e Grids ==
== 4. Cards e Menus ==
 
=== 4.1. Cards Básicos ===
Use <code>{{Card}}</code> para blocos simples de texto.


=== 4.1. Cards Simples ===
Para destacar textos lado a lado.
<pre>
<pre>
<div class="celta-grid">
<div class="celta-grid">
   {{Card|titulo=Dicas|texto=Texto do card...}}
   {{Card | titulo=Dicas | texto=Texto do card...}}
  {{Card | titulo=Manual | texto=Texto do card...}}
</div>
</div>
</pre>
</pre>


=== 4.2. Menus de Navegação (CardMenu) ===
=== 4.2. Menus de Navegação (Hubs) ===
Use <code>{{CardMenu}}</code> para criar listas de links. Cores: `blue`, `dark`, `orange`, `green`, `red`.
Para criar listas de links com ícones coloridos.
 
* **Cores:** `blue`, `dark`, `orange`, `green`, `red`.
{{Nota|warning|IMPORTANTE|Os asteriscos (*) da lista devem estar colados na margem esquerda.}}
* **Atenção:** Os asteriscos (*) devem ficar colados na esquerda.


<pre>
<pre>
Linha 121: Linha 102:
* [[Link 2]]
* [[Link 2]]
}}
}}
</div>
</pre>
=== 4.3. Grid de 2 Colunas Fixas ===
Para forçar '''2 colunas grandes''', adicione a classe <code>celta-grid-2</code>.
<pre>
<div class="celta-grid celta-grid-2">
  {{Card...}}
</div>
</div>
</pre>
</pre>
Linha 138: Linha 110:


=== Prints de Tela ===
=== Prints de Tela ===
Padroniza o tamanho e a borda das imagens.
<pre>{{Print|Nome_do_Arquivo.png|Legenda da imagem}}</pre>
<pre>{{Print|Nome_Arquivo.png|Legenda da imagem}}</pre>


=== Badges (Etiquetas) ===
=== Etiquetas de Versão ===
Use ao lado de títulos para destacar versões.
<pre>
<pre>== Instalação {{Badge|novo|v15.2}} ==</pre>
Funcionalidade Nova {{Badge|novo|v15.0}}
'''Resultado:''' <span style="font-size:1.2em; font-weight:bold;">Instalação {{Badge|novo|v15.2}}</span>
</pre>
'''Resultado:''' Funcionalidade Nova {{Badge|novo|v15.0}}


----
----


== 6. Barras de Contato (Rodapé) ==
== 6. Rodapé de Contato ==
Adicione no final das páginas para exibir os canais de atendimento.
Adicione apenas o código abaixo no final das páginas.
 
=== Padrão (Suporte Técnico) ===
Use: <code>{{ContatoSuporte}}</code>


=== Suporte Técnico (Padrão) ===
Código: <code>{{ContatoSuporte}}</code>
{{ContatoSuporte}}
{{ContatoSuporte}}


=== Financeiro / Comercial ===
=== Financeiro / Comercial ===
Use: <code>{{ContatoFinanceiro}}</code>
Código: <code>{{ContatoFinanceiro}}</code>
{{ContatoFinanceiro}}
 
----
 
== 7. Layouts Especiais ==
 
=== Tela Cheia (Sem barra lateral) ===
Para usar na Home Page ou páginas de Menu Principal.
<pre>
<div class="celta-full-width">
  ... conteúdo da página ...
</div>
</pre>


{{ContatoFinanceiro}}
=== Menu Lateral (Estilo Sistema) ===
Para imitar o menu do ERP.
<pre>
<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>
</pre>


----
----


== 7. Template Base (Copiar e Colar) ==
== 8. Template Base (Copiar e Colar) ==
''Use este código para iniciar uma nova página de manual rapidamente.''
''Copie este bloco para iniciar uma nova página de manual.''


<pre>
<pre>
Linha 184: Linha 177:
{{TabelaCampos|
{{TabelaCampos|
   {{Linha
   {{Linha
  | tipo=check
   | 1= Nome do Campo
   | 1= Nome do Campo
   | 2= Explicação do campo.
   | 2= Explicação do campo.
Linha 197: Linha 189:


{{ContatoSuporte}}
{{ContatoSuporte}}
</pre>
----
== 8. Layouts Especiais ==
=== Tela Cheia (Sem Sidebar) ===
Para Dashboards ou Home Page:
<pre>
<div class="celta-full-width">
  ... conteúdo ...
</div>
</pre>
=== Menu Lateral Estilo Sistema ===
Para replicar o menu branco lateral do sistema Celta:
<pre>
<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>]]
  </div>
</div>
</pre>
</pre>

Edição das 11h44min de 1 de dezembro de 2025

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.

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:

Fale com nosso suporte via e-mail ou WhatsApp.

E-mail → Suporte
WhatsApp → Suporte
Celta Sistemas

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]

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

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}}
Disponível em “https://wiki.celtasistemas.com.br/index.php?title=Ajuda:Guia_de_Estilo&oldid=1680”
Última modificação
Esta página foi modificada pela última vez em 1 de dezembro de 2025, às 11h44min.