Angular Dimensionamento da grade

Existem muitas maneiras diferentes de dimensionar o IgxGrid para acomodar muitos cenários que os usuários podem ter. Enquanto alguns são diretos, outros podem ser mais complexos, por isso vamos analisar cada um deles com mais profundidade. Vamos analisar a definiçãowidth eheight separadamente, já que há algumas diferenças, por exemplo, ao usar porcentagens para cada um.

Quando se trata de tamanho de borda e preenchimento para o IgxGrid, eles são levados em seus cálculos de tamanho de largura/altura ou também conhecidos como dimensionamento de caixa de borda. É aplicado em todos os cenários.

Note

Se o dimensionamento da caixa de borda for substituído pelo usuário, não podemos garantir que o IgxGrid será dimensionado corretamente.

Width

Se awidth entrada não tiver valor atribuído, seu valor padrão é100% e o IgxGrid tenta preencher o espaço disponível. Você pode verificar como a grade reage a isso naPercentages seção.

Note

Definir manualmente owidth estilo do próprio IgxGrid resultará em um comportamento inesperado.

Null

A gradewidth pode aceitar o valor denull, que, quando definido, renderiza todas as colunas do DOM. A grade é dimensionada de acordo para que não haja barra de rolagem horizontal da grade, já que a virtualização de colunas não é aplicada.

• Se houver 6 colunas e nenhuma delas tiver largura definida, a grade teráwidth de816px, porque cada coluna por padrão tem atribuídowidth de136px nesse cenário. O mesmo acontecerá se as colunas tiveremwidth percentuais. Se a barra de rolagem vertical for renderizada ou houver recursos que renderizam colunas adicionais, a largura delas também será adicionada.

  

• Se houver 6 colunas com largura de coluna definida para200px, elas em nossa janela e todas estarão visíveis:

  

• Se houver mais colunas ou outras com maior largura que saem da visão do navegador, todas ainda vão renderizar. Vamos ter a mesma quantidade de colunas, mas cada uma com largura de coluna de300px. Como nem todos cabem na área de visualização do navegador, isso criará uma barra de rolagem nativamente. O próximo exemplo mostra exatamente esse cenário:

  

• Se a grade tiver um elemento pai de qualquer tipo e não tiver nenhum overflow configurado, ela ainda assim renderizará todas as colunas visíveis. Caso contrário, se o elemento pai tiver overflowauto ouscroll, uma barra de rolagem para esse elemento pai será renderizada nativamente. O pai tem maior altura para facilitar a visualização no exemplo a seguir.

  

Note

Devido a esse comportamento, se os dados da grade contiverem muitas colunas, isso poderá ter um impacto significativo no desempenho do navegador, pois todas as colunas seriam renderizadas sem virtualização.

Pixels

Quando a entrada do IgxGrid width é definida para pixels, ela define o tamanho total da grade para esse valor e será estática. Ele não reage a nenhum redimensionamento ou mudança no DOM do navegador, embora isso não aconteça com o conteúdo da grade:

• Quando a largura é definida em pixels para que a grade renderize a barra de rolagem horizontal, sua largura de conteúdo precisa exceder a gradewidth especificada. Vamos por exemplo, fazer com que a largura combinada das colunas seja1200px excedida. Nesse caso, uma barra de rolagem horizontal será renderizada.

  

• Para cenários onde a grade tem um elemento pai, depende do estilo do pai se ela vai renderizar a barra de rolagem ou não. Todo o resto relacionado à própria grade ainda é mantido. Se a largura do elemento pai for menor que a largura da grade e tiver o estilo de overflow configurado comoauto ou,scroll a barra de rolagem será renderizada nativamente. Por exemplo, se o pai tiverwidth definido como1000px e o IgxGrid width estiver parado1200px, ele ficará semelhante às seguintes ilustrações:

  

Percentages

Quando owidth​ ​IgxGrid é definido para percentuais, ele dimensiona a grade de acordo com a largura do elemento pai. Se o elemento pai não tiver largura especificada, o IgxGrid terá tamanho relativo à janela do navegador.

• Por exemplo, se definirmos a entrada da gradewidth para100% e não houver nenhum elemento pai, ele preencherá 100% da largura disponível da janela do navegador. Se for redimensionado, a grade também será redimensionada de acordo.

  

• Se definirmos a largura da grade como100% e houver um elemento pai com largura específica de1200px, isso significará que a grade terá tamanho relativo a esse elemento e sua largura final será1200px.

  

• Se tivermos um elemento pai comwidth de1000px e temos as gradewidth definidas para150%, a largura da grade calculada será1500px. Nesse caso, a grade ainda será totalmente visível, mas se desativarmosoverflow: auto o pai, esse pai renderizará a barra de rolagem sozinho.

  

Height

Por padrão, se nenhuma altura for definida para o IgxGrid, ela será definida para100%. Você pode verificar como a grade reage dependendo da estrutura do DOM naPercentages seção.

Note

Definir manualmente oheight estilo do próprio IgxGrid resultará em um comportamento inesperado.

Null

A entrada do IgxGrid height pode aceitarnull valor, que, quando definido, exibe todas as linhas sem barra de rolagem, não importa quantas sejam. Nesse caso, não há virtualização vertical, já que a grade renderiza todas as linhas de qualquer forma.

• Se tivermos dados com 14 linhas, neste caso, a grade renderizará todas as 14 e dimensionará a grade para que todas fiquem visíveis sem nenhum espaço vazio dentro da grade.

  

• Se tivermos 24 linhas, a grade ainda renderizará todas as linhas, mas como são muitas, elas excedem os limites do navegador. É por isso que o próprio navegador renderizará a barra de rolagem vertical por padrão para que o usuário possa rolar para baixo até o restante das linhas.

  

• Se houver um elemento pai com definidoheight, a grade ainda renderizará todas as linhas e não será afetada. Digamos que o pai ou mãe tenhaheight de.650px Se ele tiveroverflow definido paraauto ou,scroll vai renderizar uma barra de rolagem vertical, mas a grade ainda não será afetada:

  

Note

Devido a esse comportamento, se os dados da grade contiverem muitas linhas, isso poderá ter um impacto significativo no desempenho do navegador, já que todas as linhas seriam renderizadas sem virtualização.

Pixels

Definir o IgxGrid height em pixels é mais simples, já que a grade terá o tamanho desse tamanho específico em todas as ocasiões, de forma semelhante a comowidth é definida nos pixels.

• Se definirmos, por exemplo, a altura500px com 4 linhas para nossos dados, a grade ficará nesse tamanho e, como 4 linhas não são suficientes para preencher a área visível, espera-se que haja alguma área vazia.

  

• Se o número de linhas exceder a área visível da grade quandoheight está definido para pixels, uma barra de rolagem vertical será renderizada. Por exemplo, uma grade com500px altura definida e 14 linhas será renderizada da seguinte forma:

  

• Se houver um elemento pai comheight definido, a menos que tenhaoverflow sido definido comoauto ouscroll, a grade ainda será totalmente visível. Caso contrário, ele vai renderizar uma barra de rolagem.

  

Percentages

Quando aheight entrada é definida para percentuais, o IgxGrid terá um tamanho baseado na altura do elemento pai. Se o elemento pai tiver seuheight conjunto em pixels ou porcentagens, a grade terá tamanho relativo ao tamanho do pai.

Quando o elemento pai não tem altura definida, o navegador não atribui altura a ele inicialmente e o dimensiona com base em seus filhos e seu tamanho. É por isso que não há como a grade saber qual altura de base usar para aplicar o dimensionamento percentual com base nela. Por esse motivo, ele renderizará no máximo 10 linhas e, se forem mais linhas, uma barra de rolagem vertical será renderizada. Caso contrário, a grade se ajustará ao número de linhas renderizadas. Examinaremos esse cenário com mais detalhes nos próximos exemplos.

Vamos definirwidth como1200px e o elemento pai não ter nenhum tamanho aplicado a ele:

• Se houver menos de 10 linhas, a grade tentará ajustar todas as linhas na área visível sem ter um espaço vazio entre a última linha e a parte inferior da área visível. Por exemplo, vamos fazer com que os dados da grade consistam em 7 linhas. A grade renderizará todas as 7 linhas sem barra de rolagem vertical e sem espaço vazio dentro da grade.

  

• Se houver mais de 10 linhas, uma barra de rolagem vertical será renderizada para o restante das linhas e apenas 10 linhas poderão ser visíveis a qualquer momento. No próximo exemplo, apenas o número da linha é aumentado para 14.

  

• Se definirmos a altura do elemento pai para800px e a IgxGrid para100% altura, isso significa que a grade terá tamanho para 100% de800px.

  

• Se o IgxGrid height estiver definido para um número maior que100% e o elemento pai tiver altura, para que o pai renderize a barra de rolagem, novamente ele precisa teroverflow definido comoauto ouscroll. Caso contrário, a grade será totalmente visível e com tamanho relativo ao tamanho do pai.

  

• Se quisermos que a grade seja dimensionada para100% a janela do navegador, precisaríamos definir tantobody a altura quanto a dos elementos da grade pai para100%. Nesse caso, o elemento pai pode ser dimensionado e a grade será dimensionada de acordo se o navegador for redimensionado.

  

Column Sizing

Dependendo do tamanho da grade em si, as colunas dentro dela também podem ser dimensionadas de forma diferente, o que pode resultar em cenários em que a grade renderiza a barra de rolagem horizontal ou não. As colunas podem ter largura definida em pixels, porcentagens ou dimensionadas automaticamente quando nada é definido. Vamos dar uma olhada mais profunda nesses cenários nesta seção.

Default

Por padrão, quando uma coluna não tem uma largura especificada, ela tenta autodimensionar, para que ela preencha se houver algum espaço vazio disponível na área de visualização da grade. Colunas com tamanho automático têm largura mínima de136px, então se a área disponível for menor que136px para aquela coluna, ela será padrão para esse tamanho.

Quando a grade é redimensionada nesses cenários, a largura da coluna também é atualizada para refletir as alterações, para preencher qualquer novo espaço vazio disponível.

• Se uma coluna não tiver especificadowidth e o IgxGrid estiverwidth definido paranull, ela será dimensionada para o mínimo de136px. Isso significa que, para uma grade comwidth null e 6 colunas que não têm largura, cada coluna terá o tamanho para136px.

  

• Quando há múltiplas colunas autodimensionadas, elas dividem igualmente o espaço disponível entre si. Isso significa que, se tivermos 6 colunas e houver área vazia de ,1200px cada uma terá o tamanho de200px.

  

• Se houver espaço vazio disponível, de modo que cada coluna com tamanho automático será menor,136px todas as colunas com tamanho automático serão direcionadas por136px padrão e a grade renderizará a barra de rolagem horizontal. No próximo exemplo, vamos ter 12 colunas com tamanho automático e a gradewidth definida para1000px.

  

• Se uma coluna não tiverwidth especificado, mas todas as outras colunas tiveremwidth pixels ou porcentagens, essa coluna tentará também preencher o espaço disponível. Por exemplo, se não tivermos largura definida para a primeira coluna e todas as outras 5 têmwidth of100px, a primeira preencherá o restante.

  

• O mesmo vale se várias colunas não tiveremwidth especificado, todas dividirão igualmente o espaço disponível entre si. Na ilustração seguinte, a primeira coluna estáwidth definida para100px.

  

Note

Colunas de recursos, como Seletor de linha, caixa de seleção, coluna e etc., preenchem o espaço adicional que é levado em consideração ao dimensionar automaticamente as colunas.

Pixels

Quando as colunas têm pixels definidoswidth específicos, elas se mantêm nesse tamanho, a menos que sejam redimensionadas manualmente. Como a somawidth das colunas é estática, pode ser menor que a IgxGrid width ou excedê-la.

• Se a somawidth de todas as colunas for menor que a IgxGrade width, haveria uma área vazia dentro da grade que as colunas não conseguiriam preencher. Esse é o comportamento esperado do IgxGrid. No próximo exemplo, as colunas têm150px largura.

  

• Se a somawidth de todas as colunas for maior que a IgxGrid width real, uma barra de rolagem horizontal será renderizada. No próximo exemplo, cada uma das 6 colunas tem largura de300px e grade tem largura de1200px, o que significa que as colunas combinadas têm excesso de600px que sai dos limites.

  

Auto

Quando as colunas são definidas paraauto seu tamanho, ajusta-se para caber na palavra mais longa da coluna. Áreas vazias são possíveis se houver células com valores muito curtos, enquanto outras células têm valores muito longos. Nesse cenário, todas as células da coluna se ajustariam para pegar a largura da célula com o valor mais longo.

Percentages

Quando as colunas têm percentuaiswidth, seu tamanho é calculado em relação ao tamanho da grade. É semelhante ao funcionamento da largura nos pixels, mas também oferece resposta às colunas, o que significa que, quando a grade é redimensionada, as colunas também serão redimensionadas de acordo.

• Se a largura combinada de todas as colunas for menor,100% de forma semelhante a quando está em pixels, pode haver uma área vazia da grade que as colunas não cobrem.

  

• Se a largura combinada for exata100%, as colunas preencherão todo o espaço disponível da grade.

  

• Se a largura combinada exceder100% para que o usuário possa ver as colunas fora de vista, uma barra de rolagem horizontal é renderizada.

  

• Se as colunas estiverem definidas em porcentagens e a gradewidth estiver definida paranull, ela se aplicariawidth a cada136px coluna. Isso porque as colunas não podem ser dimensionadas relativamente à grade, já que ela não temwidth si mesma e depende do seu conteúdo para ser dimensionado quandowidth está.null No exemplo a seguir, todas as 6 colunas foramwidth definidas para50%:

  

Grid Cell Spacing Control

O IgxGrid adapta automaticamente seu espaçamento interno com base na configuração de tamanho. Você pode personalizar ainda mais o preenchimento e as margens no cabeçalho da grade e nas células do corpo usando propriedades personalizadas CSS para controle de espaçamento.

Global Grid Spacing

Para reduzir ou aumentar o espaçamento em todas as células de grade em seu aplicativo:

/* Reduce all grid spacing by 20% */
igx-grid {
    --ig-spacing: 0.8;
}

/* Increase spacing for better touch accessibility */
igx-grid {
    --ig-spacing: 1.2;
}

Grid-Specific Spacing

Para ajustar o espaçamento de uma instância de grade específica:

/* Make a particular grid more compact */
.my-compact-grid {
    --ig-spacing: 0.6;
}

/* Give a specific grid more breathing room */
.my-spacious-grid {
    --ig-spacing: 1.4;
}

Directional Spacing Control

Você pode controlar o espaçamento horizontal e vertical de forma independente:

/* Reduce only horizontal spacing (left/right padding) */
.my-grid {
    --ig-spacing-inline: 0.5;
    --ig-spacing-block: 1.0; /* Keep vertical spacing normal */
}

/* Adjust vertical spacing for tighter row spacing */
.my-grid {
    --ig-spacing-inline: 1.0; /* Keep horizontal spacing normal */
    --ig-spacing-block: 0.7; /* Reduce vertical spacing (if applicable) */
}

Size-Specific Spacing

Diferentes multiplicadores de espaçamento podem ser aplicados com base na densidade de exibição da grade:

.my-grid {
    /* Compact density gets very tight spacing */
    --ig-spacing-small: 0.5;

    /* Medium density uses normal spacing */
    --ig-spacing-medium: 1.0;

    /* Comfortable density gets extra spacing */
    --ig-spacing-large: 1.3;
}

Header vs Body Cell Spacing

Embora as propriedades de espaçamento afetem as células do cabeçalho e do corpo, você pode direcioná-las especificamente, se necessário:

/* Reduce padding in header cells specifically */
.my-grid igx-grid-header {
    --ig-spacing: 0.7;
}

/* Adjust spacing in data cells */
.my-grid igx-grid-cell {
    --ig-spacing: 0.9;
}

Note

Esses ajustes de espaçamento funcionam em conjunto com a densidade de exibição da grade. Os multiplicadores de espaçamento são aplicados aos valores de espaçamento base que já são determinados pelo fato de a grade estar no modo de densidade compacto, aconchegante ou confortável.

API References

• IgxGridComponent API_IgxGridRow API
• Estilos IgxGridComponent

Additional Resources

• Visão geral da grade
• Virtualização e desempenho

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub