Predefinição:Cabeçalho de divisão diagonal

Origem: Wikipédia, a enciclopédia livre.
Documentação da predefinição[ver] [editar] [histórico] [purgar]

Uso[editar código-fonte]

Esta prédefinição simula uma c​​élula de cabeçalho de tabela dividida diagonalmente, um dispositivo frequentemente usado para rotular cabeçalhos de linhas e colunas de maneira compacta, como neste exemplo:

para
de
sólido líquido gasoso
sólido transformação sólido-sólido fusão sublimação
líquido solidificação ebulição/evaporação
gasoso ressublimação/deposição condensação/liquefação

Para usá-la, crie uma célula de cabeçalho usando ! seguido por {{cabeçalho de divisão diagonal|cabeçalho de linha|cabeçalho de coluna}}.

Como o efeito é obtido desenhando uma linha diagonal na célula, os dois cabeçalhos ainda fazem parte da mesma célula e podem facilmente ultrapassar a linha. Uma solução é preencher os cabeçalhos com espaços não separáveis (&nbsp;), quebras de linha (<br />), e/ou CSS . O usuário da prédefinição é responsável por verificar se ela não ultrapassa nos navegadores da Web comuns.

Fonte Wiki Resultado renderizado
{| class="wikitable"
! {{Cabeçalho de divisão diagonal|de|para}}
! sólido !! líquido !! gasoso
|-
! sólido
| transformação sólido-sólido || fusão || sublimação=
|}
para
de
sólido líquido gasoso
sólido transformação sólido-sólido fusão sublimação=

Cor de fundo e células que não são do cabeçalho[editar código-fonte]

Um terceiro parâmetro pode ser adicionado para alterar a cor de fundo padrão da célula de cabeçalho. Alterá-lo para transparent (ou outra cor, como white ou #ffffff) permite que a prédefinição seja aplicada a células que não são do cabeçalho. Prefixe com | em vez de !, como nesta matriz de recompensa amigo ou inimigo?:

Exemplo
par 2
par 1
"Amigo" "Inimigo"
"Amigo"
1
1
2
0
"Inimigo"
0
2
0
0
Código
{| class="wikitable" style="margin:0 auto;text-align:center;"
! {{Cabeçalho de divisão diagonal | par 1 | {{color|#900|par 2}} | yellow}}
! style="width:6em;background:yellow;"| {{color|#900|"Amigo" }}
! style="width:6em;background:yellow;"| {{color|#900|"Inimigo" }}
|-
! style="width:6em;background:yellow;"| "Amigo" 
| {{Cabeçalho de divisão diagonal | 1 | {{color|#900|1}} | palegreen}}
| {{Cabeçalho de divisão diagonal | 0 | {{color|#900|2}} | transparent}}
|-
! style="width:6em;background:yellow;"| "Inimigo" 
| {{Cabeçalho de divisão diagonal | 2 | {{color|#900|0}} | transparent}}
| {{Cabeçalho de divisão diagonal | 0 | {{color|#900|0}} | pink}}
|}

Abrangendo colunas e linhas e tabelas recolhíveis e classificáveis[editar código-fonte]

A prédefinição é compatível com tabelas recolhíveis e células usando colspan ou rowspan, caso em que se coloca o atributo colspan/rowspan entre ! e {{cabeçalho de divisão diagonal ...}}. Não é compatível com tabelas classificáveis, pois as setas de classificação não são desenhadas, mas esse problema pode ser resolvido usando uma segunda linha de cabeçalho:

Exemplo
n
  Cidade
2021 2022 
Dezembro Janeiro Fevereiro
Roma Rome 8 1 6
Veneza Venice 3 5 7
Florença Florence 4 9 2
Código
{| class="wikitable sortable mw-collapsible" style="margin:0 auto;text-align:center;"
! colspan="2" rowspan="2" {{Cabeçalho de divisão diagonal|  Cidade|''n''}}
! {{#expr:{{CURRENTYEAR}} - 1}}
! colspan="2"|{{CURRENTYEAR}} 
|-
! Dezembro !! Janeiro !! Fevereiro
|-
! Roma !! ''Rome''
| 8 || 1 || 6
|-
! Veneza !! ''Venice''
| 3 || 5 || 7
|-
! Florença !! ''Florence''
| 4 || 9 || 2
|}

Dados da prédefinição[editar código-fonte]

Simula uma célula de cabeçalho de tabela dividida diagonalmente

[Gerir dados TemplateData]

Parâmetros da predefinição

ParâmetroDescriçãoTipoEstado
linhas1

cabeçalho dos cabeçalhos de linha, mostrado no canto inferior esquerdo

Exemplo
''eixo y''
Stringobrigatório
colunas2

cabeçalho dos cabeçalhos das colunas, mostrado no canto superior direito

Exemplo
{{color|#6cf|eixo x}}
Stringobrigatório
cor de fundo3

cor de fundo opcional, use <code>transparent</code> para fundo padrão de células que não são do cabeçalho

Padrão
#eaecf0
Exemplo
transparent
Stringopcional

Notas técnicas[editar código-fonte]

  • É possível criar uma versão sem a saturação de linha por Krautzberger. Esta funciona desenhando uma linha e usando uma grade CSS 2x2 com os cantos inferior esquerdo e superior direito.
  • Consulte caniuse para obter suporte do recurso css-grid necessário; compare com gradientes css (sem prefixo) subjacentes à implementação atual.
  • Nenhuma das implementações oferece suporte ao layout de texto ao longo da diagonal, pois o navegador não reconhece a forma triangular. As formas CSS podem ser uma solução, mas a abordagem mais fácil dentro da forma ainda não foi padronizada.