|
|
| Linha 6: |
Linha 6: |
| Use este guia para copiar os códigos dos componentes oficiais. | | Use este guia para copiar os códigos dos componentes oficiais. |
|
| |
|
| __TOC__
| | : 1. Cabeçalho da Página |
| | Use sempre na primeira linha da página. |
|
| |
|
| == 1. Cabeçalho da Página ==
| | :: Exemplo Padrão (Manuais e Tutoriais): |
| Use sempre na primeira linha da página.
| |
|
| |
|
| === Padrão (Manuais e Tutoriais) ===
| | <code> |
| <pre> | |
| {{Cabecalho | | {{Cabecalho |
| | [[Módulo Pai]] › [[Sub-rotina]] | | | [[Módulo Pai]] › [[Sub-rotina]] |
| | Título da Página | | | Título da Página |
| }} | | }} |
| </pre> | | </code> |
| | |
| === Invisível (Dashboards e Hubs) ===
| |
| <pre>
| |
| {{Cabecalho | [[Módulo Pai]] | no}}
| |
| </pre>
| |
| | |
| ----
| |
| | |
| == 2. Caixas de Aviso (Notas) ==
| |
| Sintaxe: <code>{{Nota | tipo | TÍTULO | Texto...}}</code>
| |
| | |
| === Tipos Disponíveis ===
| |
| | |
| <pre>{{Nota|info|DICA|Texto da dica ou informação complementar.}}</pre>
| |
| {{Nota|info|DICA|Texto da dica ou informação complementar.}}
| |
| | |
| <pre>{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}</pre>
| |
| {{Nota|success|SUCESSO|Para novidades ou boas práticas.}}
| |
| | |
| <pre>{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}</pre>
| |
| {{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}
| |
| | |
| <pre>{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}</pre>
| |
| {{Nota|danger|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:'''
| |
| <pre>
| |
| {{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
| |
| }}
| |
| }}
| |
| </pre>
| |
| | |
| '''Resultado Visual:'''
| |
| {{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
| |
| }}
| |
| }}
| |
| | |
| ----
| |
| | |
| == 4. Cards e Menus ==
| |
| | |
| === 4.1. Cards Simples ===
| |
| Para destacar textos lado a lado.
| |
| <pre>
| |
| <div class="celta-grid">
| |
| {{Card | titulo=Dicas | texto=Texto do card...}}
| |
| {{Card | titulo=Manual | texto=Texto do card...}}
| |
| </div>
| |
| </pre>
| |
| | |
| === 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.
| |
| | |
| <pre>
| |
| <div class="celta-grid">
| |
| {{CardMenu
| |
| | cor = orange
| |
| | icone = bi-star
| |
| | titulo = Favoritos
| |
| | conteudo =
| |
| * [[Link 1]]
| |
| * [[Link 2]]
| |
| }}
| |
| </div>
| |
| </pre>
| |
| | |
| ----
| |
| | |
| == 5. Imagens e Badges ==
| |
| | |
| === Prints de Tela ===
| |
| <pre>{{Print|Nome_do_Arquivo.png|Legenda da imagem}}</pre>
| |
| | |
| === Etiquetas de Versão ===
| |
| <pre>
| |
| Funcionalidade Nova {{Badge|novo|v15.0}}
| |
| </pre>
| |
| '''Resultado:''' Funcionalidade Nova {{Badge|novo|v15.0}}
| |
| | |
| ----
| |
| | |
| == 6. Rodapé de Contato ==
| |
| Adicione apenas o código abaixo no final das páginas.
| |
| | |
| === Suporte Técnico (Padrão) ===
| |
| Código: <code>{{ContatoSuporte}}</code>
| |
| {{ContatoSuporte}}
| |
| | |
| === Financeiro / Comercial ===
| |
| 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>
| |
| | |
| === 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>
| |
| | |
| ----
| |
| | |
| == 8. Template Base (Copiar e Colar) ==
| |
| ''Copie este bloco para iniciar uma nova página de manual.''
| |
| | |
| <pre>
| |
| {{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}}
| |
| </pre>
| |
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):
