Ajuda:Guia de Estilo: mudanças entre as edições
Mais ações
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 85: | Linha 85: | ||
Use para criar menus visuais, dashboards ou agrupar informações lado a lado. | Use para criar menus visuais, dashboards ou agrupar informações lado a lado. | ||
=== | === 4.1. Cards Básicos === | ||
Use <code>{{Card}}</code> para blocos simples de texto. | |||
<pre> | <pre> | ||
| Linha 95: | Linha 95: | ||
</pre> | </pre> | ||
=== | === 4.2. Menus de Navegação (CardMenu) === | ||
Use <code>{{CardMenu}}</code> para criar listas de links com acentos coloridos. Ideal para Hubs de conteúdo. | |||
'''Cores disponíveis:''' blue, dark, orange, green, red. | |||
<pre> | |||
<div class="celta-grid"> | <div class="celta-grid"> | ||
{{ | {{CardMenu | ||
|titulo= | | cor = orange | ||
| | | icone = bi-star | ||
| titulo = Favoritos | |||
| conteudo = | |||
* [[Link 1]] | |||
* [[Link 2]] | |||
}} | }} | ||
{{ | </div> | ||
|titulo= | </pre> | ||
| | {{Nota|warning|IMPORTANTE|Ao usar o CardMenu, os asteriscos (*) da lista devem estar colados na margem esquerda, sem espaços antes.}} | ||
'''Resultado Visual:''' | |||
<div class="celta-grid"> | |||
{{CardMenu | |||
| cor = orange | |||
| icone = bi-star | |||
| titulo = Favoritos | |||
| conteudo = | |||
* [[Página principal|Link Exemplo 1]] | |||
* [[Página principal|Link Exemplo 2]] | |||
}} | }} | ||
</div> | </div> | ||
=== 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 <code>celta-grid-2</code>. | |||
<pre> | |||
<div class="celta-grid celta-grid-2"> | |||
{{Card...}} | |||
{{Card...}} | |||
</div> | |||
</pre> | |||
---- | ---- | ||
Edição das 07h35min de 29 de novembro de 2025
Guia de Estilo e Padrões de Edição
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.
Gera a caixa azul com título. Ideal para documentações.
{{Cabecalho
| [[Módulo Pai]] › [[Sub-rotina]]
| Título da Página
}}
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
Use para dicas gerais ou informações complementares. (Se não informar o tipo, este será usado).
{{Nota|info|DICA|Texto da dica...}}
Use para indicar novas funcionalidades ou boas práticas recomendadas.
{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}
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...}}
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
{{TabelaCampos|
{{Linha| Nome do Campo | Explicação do que deve ser preenchido. }}
{{Linha| Outro Campo | Outra explicação. }}
}}
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>
Ao usar o CardMenu, os asteriscos (*) da lista devem estar colados na margem esquerda, sem espaços antes.
Resultado Visual:
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:
{{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|Campo 1|Descrição do campo 1.}}
{{Linha|Campo 2|Descrição do campo 2.}}
}}
== 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.}}