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 anterior
Sem resumo de edição
Sem resumo de edição
 
(24 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
{{Cabecalho
{{Cabecalho
  |
  |
  | Guia de Estilo e Padrões de Edição
  | Guia de Estilo e Padrões
}}
}}


Linha 8: Linha 8:
__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;">
=== Exemplo Padrão (Manuais e Tutoriais) ===
<div class="celta-card">
 
<div class="celta-card-header">Opção A: Padrão (Manuais)</div>
<pre><nowiki>
<div class="celta-card-body">
Gera a caixa azul com título. Ideal para documentações.
<pre>
{{Cabecalho
{{Cabecalho
  | [[Módulo Pai]] › [[Sub-rotina]]
  | [[Tutoriais]] › [[Sub-rotina]]
  | Título da Página
  | Título da Página de *Exemplo*
}}
}}
</pre>
</nowiki></pre>
</div>
 
</div>
'''Resultado:'''


<div class="celta-card">
<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>
{{Cabecalho
{{Cabecalho
  | [[Módulo Pai]]
  | [[Módulo Pai]] › [[Sub-rotina]]
  | no
  | Título da Página de *Exemplo*
}}
}}
</pre>
 
</div>
=== Invisível (Dashboards e Hubs) ===
</div>
 
</div>
<pre><nowiki>
{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}
</nowiki></pre>
 
'''Resultado:'''
 
{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}


----
----


== 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:
<pre><nowiki>
{{Nota | tipo | TÍTULO | Texto...}}
</nowiki></pre>
 
=== Tipo: Dica / Informação ===
 
<pre><nowiki>
{{Nota|info|DICA|Texto da dica ou informação complementar.}}
</nowiki></pre>
 
'''Resultado:'''
{{Nota|info|DICA|Texto da dica ou informação complementar.}}


=== Sintaxe ===
=== Tipo: Sucesso / Novidade ===
<pre>{{Nota | TIPO | TÍTULO | Seu texto aqui... }}</pre>


=== Tipos Disponíveis ===
<pre><nowiki>
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}
</nowiki></pre>


{{Nota|info|INFO (Padrão)|Use para dicas gerais ou informações complementares.}}
'''Resultado:'''
<pre>{{Nota|info|DICA|Texto da dica...}}</pre>
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}


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


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


{{Nota|danger|CRÍTICO|Use para riscos de perda de dados ou bloqueios.}}
'''Resultado:'''
<pre>{{Nota|danger|IMPORTANTE|Não desligue o servidor...}}</pre>
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}
 
=== Tipo: Crítico / Erro ===
 
<pre><nowiki>
{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}
</nowiki></pre>
 
'''Resultado:'''
{{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. Utilize `1=` e `2=` para evitar quebras.
 
=== Exemplo de Tabela ===


=== Sintaxe Básica ===
<pre><nowiki>
<pre>
{{TabelaCampos|
{{TabelaCampos|
   {{Linha| Nome do Campo | Explicação do que deve ser preenchido. }}
   {{Linha
  | 1= Nome do Campo
  | 2= Explicação do campo.
  }}
  {{Linha
  | 1= Outro Parâmetro
  | 2= Explicação com lista:
* Item A
* Item B
  }}
}}
}}
</pre>
</nowiki></pre>


=== Sintaxe Segura (Anti-Bug) ===
'''Resultado:'''
{{Nota|warning|RECOMENDADO|Se você precisar quebrar linhas ou usar listas dentro da tabela, use '''1=''' e '''2=''' para evitar erros.}}


<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:
</pre>
* Item A
 
* Item B
=== Resultado Visual ===
   }}
{{TabelaCampos|
   {{Linha|Data Inicial|Informe a data de início do relatório.}}
   {{Linha|Cliente|Selecione o cliente ou deixe em branco para todos.}}
}}
}}


----
----


== 4. Cards e Grids ==
== 4. Cards e Menus ==


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


<pre>
<pre><nowiki>
<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>
</nowiki></pre>


=== 4.2. Menus de Navegação (CardMenu) ===
'''Resultado:'''
Use <code>{{CardMenu}}</code> para criar listas de links. Cores: `blue`, `dark`, `orange`, `green`, `red`.
 
<div class="celta-grid">
  {{Card | titulo=Dicas | texto=Texto do card...}}
  {{Card | titulo=Manual | texto=Texto do card...}}
</div>


{{Nota|warning|IMPORTANTE|Os asteriscos (*) da lista devem estar colados na margem esquerda.}}
=== 4.2. Menus de Navegação (Hubs) ===
Cores: `blue`, `dark`, `orange`, `green`, `red`.


<pre>
<pre><nowiki>
<div class="celta-grid">
<div class="celta-grid">
{{CardMenu
{{CardMenu
Linha 122: Linha 152:
}}
}}
</div>
</div>
</pre>
</nowiki></pre>


=== 4.3. Grid de 2 Colunas Fixas ===
'''Resultado:'''
Para forçar '''2 colunas grandes''', adicione a classe <code>celta-grid-2</code>.


<pre>
<div class="celta-grid">
<div class="celta-grid celta-grid-2">
{{CardMenu
  {{Card...}}
| cor = orange
| icone = bi-star
| titulo = Favoritos
| conteudo =
* [[Página principal|Link Exemplo 1]]
* [[Página principal|Link Exemplo 2]]
}}
</div>
 
=== 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.
 
<pre><nowiki>
<div class="celta-grid">
{{CardLista
| icone = bi-lightning-fill
| cor = #f59e0b
| titulo = Acesso Rápido
| conteudo =
* [[Link 1]]
* [[Link 2]]
}}
</div>
</nowiki></pre>
 
'''Resultado:'''
 
<div class="celta-grid">
{{CardLista
| icone = bi-lightning-fill
| cor = #f59e0b
| titulo = Acesso Rápido
| conteudo =
* [[Página principal|Link 1]]
* [[Página principal|Link 2]]
}}
</div>
</div>
</pre>


----
----


== 5. Imagens e Badges ==
== 5. Ícones ==


=== Prints de Tela ===
O Wiki utiliza a biblioteca '''Bootstrap Icons''': [https://icons.getbootstrap.com/ Galeria Oficial].
Padroniza o tamanho e a borda das imagens.
<pre>{{Print|Nome_Arquivo.png|Legenda da imagem}}</pre>


=== Badges (Etiquetas) ===
* **Uso em Cards:** Passe o nome da classe no parâmetro `icone` (Ex: `icone = bi-gear`).
Use ao lado de títulos para destacar versões.
* **Uso no Texto:** Use a tag `<i>`:
<pre>== Instalação {{Badge|novo|v15.2}} ==</pre>
*: ` <i class="bi bi-check-circle"></i> ` -> <i class="bi bi-check-circle"></i>
'''Resultado:''' <span style="font-size:1.2em; font-weight:bold;">Instalação {{Badge|novo|v15.2}}</span>


----
----


== 6. Barras de Contato (Rodapé) ==
== 6. Imagens e Badges ==
Adicione no final das páginas para exibir os canais de atendimento.
 
=== 6.1. Prints de Tela ===


=== Padrão (Suporte Técnico) ===
<pre><nowiki>
Use: <code>{{ContatoSuporte}}</code>
{{Print|Nome_do_Arquivo.png|Legenda da imagem}}
</nowiki></pre>
 
=== 6.2. Etiquetas de Versão ===
 
<pre><nowiki>
Funcionalidade Nova {{Badge|novo|v15.0}}
</nowiki></pre>
 
'''Resultado:'''
 
Funcionalidade Nova {{Badge|novo|v15.0}}
 
=== 6.3. Logo Oficial (SVG) ===
Exibe a logo vetorizada do sistema.
* **Uso:** `{{Logo|width=200px}}`
 
'''Resultado:'''
{{Logo|width=200px}}
 
----
 
== 7. Rodapé de Contato ==
Adicione apenas o código abaixo no final das páginas.
 
=== Suporte Técnico (Padrão) ===
 
<pre><nowiki>
{{ContatoSuporte}}
</nowiki></pre>
 
'''Resultado:'''


{{ContatoSuporte}}
{{ContatoSuporte}}


=== Financeiro / Comercial ===
=== Financeiro / Comercial ===
Use: <code>{{ContatoFinanceiro}}</code>
 
<pre><nowiki>
{{ContatoFinanceiro}}
</nowiki></pre>
 
'''Resultado:'''


{{ContatoFinanceiro}}
{{ContatoFinanceiro}}
Linha 163: Linha 261:
----
----


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


<pre>
<pre><nowiki>
{{Cabecalho
{{Cabecalho
  | [[Módulo]] › [[Funcionalidade]]
  | [[Módulo]] › [[Funcionalidade]]
Linha 184: Linha 282:
{{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 294:


{{ContatoSuporte}}
{{ContatoSuporte}}
</pre>
</nowiki></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>

Edição atual tal como às 21h26min de 1 de dezembro de 2025

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

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

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:


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