Info+News+Tech
1

Ao criar interfaces de usuário, muitas vezes encontramos o problema de que há mais dados em nossas tabelas do que podem ser ajustados na janela de visualização visível. Para obter uma excelente experiência do usuário em componentes como gráficos de Gannt, tabelas de dados e planilhas, geralmente usamos a propriedade CSS fixa nos elementos do cabeçalho. Esta é uma tarefa simples quando feita apenas em uma das bordas da mesa.

Mas e se quisermos exibir uma tabela enorme e, portanto, precisarmos de cabeçalhos fixos em mais bordas simultaneamente? Este é exatamente o problema que enfrentamos ao construir nosso ReactGrid e, neste artigo, queremos compartilhar a solução que encontramos.

Neste guia, mostraremos como criar o layout para obter um comportamento de rolagem nativo com cabeçalhos fixos como os mostrados acima, sem usar JavaScript .

Quais são os benefícios da solução proposta?

suporte nativo de navegadores modernos,
excelente experiência do usuário (intuitividade, rapidez),
elementos adicionais na visualização rolável não afetam a experiência do usuário,
sem JavaScript, apenas CSS e HTML,
funciona perfeitamente em dispositivos de toque,
evita o uso de z-index para não afetar outros elementos no site (precisa de valores de estilo de z-index no Firefox com esta solução).
Você aprenderá como colocar elementos no DOM e estilizá-los para obter painéis pegajosos roláveis ​​totalmente funcionais usando o flexbox passo a passo. Ele está funcionando e foi testado nos seguintes navegadores (lembre-se de que o Firefox precisa de valores de estilo z-index).

Colocando Elementos no DOM usando FlexBox
O primeiro e mais importante aspecto é a ordem correta dos elementos no DOM, porque os elementos que aparecem posteriormente no DOM se sobrepõem a outros elementos.

Vamos imaginar que queremos criar um layout com cabeçalhos fixos em cada borda. Portanto, precisamos dividir nossa superfície em 9 painéis. Obviamente, o mesmo procedimento também se aplica a um número menor de arestas adesivas.

Colocamos tudo em duas tags DIV. O primeiro com overflow: auto CSS propriedade para ter uma visualização rolável. O segundo com as seguintes propriedades CSS:

posição: relativa;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start.

O gráfico acima ilustra a ordem adequada do DOM dos elementos. O primeiro elemento deve ser aquele no centro do layout, vamos chamá-lo de “painel central central”. É o único elemento DIV que possui uma posição relativa em seus estilos CSS.

Os próximos elementos, em ordem do menos para o mais importante, são painel central inferior, painel central direito, painel central superior e painel central esquerdo. Esses elementos têm posições fixas em estilos CSS.

A mesma situação se aplica aos elementos localizados nos cantos da visualização. Nós os colocamos na ordem: painel inferior direito, painel inferior esquerdo, painel superior direito, painel superior esquerdo.

Agora sabemos em que ordem os painéis devem ser colocados para obter o comportamento de sobreposição correto. No entanto, precisamos de mais. Por exemplo, nosso painel superior esquerdo é o último elemento no DOM e será renderizado como o último na tela.

O que precisamos fazer é mudar a ordem visual dos elementos. Isso pode ser obtido usando a propriedade CSS order .

Vamos usar a ilustração acima e colocar uma seta para nos ajudar a classificar os elementos na ordem certa. Precisamos ir do canto superior esquerdo para o canto inferior direito.

Isso tornará mais fácil para nós criar uma tabela para definir a propriedade CSS flex order para nossos elementos de cabeçalho fixos.

Criamos uma base sólida para atingir o comportamento desejado. Os painéis são posicionados na ordem correta e seu comportamento de sobreposição é o esperado. Agora precisamos definir valores CSS adicionais necessários para eles.

Para nossos elementos de cabeçalho fixos, devemos definir a posição: fixos e os valores CSS superior, direito, esquerdo e inferior adequados .

Agora podemos definir o tamanho dos painéis. Primeiro, definimos a largura e a altura do “elemento de rolagem”. Claro, ele precisa ser menor do que o conteúdo, para exibir algumas barras de rolagem.

Então, a largura e a altura do “envoltório dos painéis” devem ser as somas das larguras e alturas dos painéis de contenção.

Se você alcançou esta etapa, seu resultado pode já estar funcionando conforme o esperado, mas você provavelmente notou que os painéis inferiores são cobertos pelos painéis superiores durante a rolagem.

O mesmo comportamento também acontece com os painéis esquerdo e direito. Para evitar essa sobreposição, precisamos adicionar algumas margens aos painéis, de modo que os painéis inferior e superior, e também os painéis esquerdo e direito, se afastem.

No início do artigo, foi mencionado que se você deseja ser compatível com o navegador Mozilla Firefox, você precisa definir o estilo CSS do índice z para alguns elementos. A tabela abaixo mostra os valores de índice z necessários.

Resumo e exemplo de aplicação
Se você definir todas as propriedades conforme mostrado neste artigo, poderá obter o resultado esperado. Também preparamos um exemplo rápido que permite observar toda a implementação. Sinta-se à vontade para usar nossa experiência e economizar tempo enquanto tenta alcançar um resultado satisfatório ou experimente nosso ReactGrid .

Gosta de CSS? Encontre aqui vagas que pedem ser do seu interesse.

Deixe uma resposta

Info.CEVIU