Spacing

    A configuração de espaçamento pode melhorar significativamente a representação visual de grandes quantidades de dados. Em Ignite UI for Angular, fornecemos um conjunto predefinido de opções para ajustar preenchimentos e margens.

    Em vez de usar valores fixos, usamos propriedades personalizadas CSS para ajustar o espaçamento em um aplicativo ou em um nível de componente.

    How Spacing Works

    Ignite UI for Angular fornece um sistema de espaçamento sofisticado que é dimensionado dinamicamente com base nos tamanhos dos componentes (pequeno, médio, grande). O sistema de espaçamento é construído em torno de propriedades personalizadas de CSS que permitem controlar o espaçamento em um nível global ou de componente sem escrever CSS personalizado.

    The Relationship Between Sizing and Spacing

    O sistema de espaçamento em Ignite UI está intimamente ligado ao dimensionamento dos componentes. Os componentes podem ter três tamanhos diferentes:

    • Pequeno- Espaçamento compacto para layouts densos
    • Medium - Default balanced spacing.
    • Espaçamento grande e confortável para interfaces amigáveis ao toque

    O espaçamento se adapta automaticamente com base no tamanho ativo, garantindo uma hierarquia visual consistente em todo o aplicativo.

    Core CSS Custom Properties

    O sistema de espaçamento gira em torno de várias propriedades personalizadas CSS importantes:

    Global Spacing Properties

    • --ig-spacing- O multiplicador de espaçamento base (padrão: 1)
    • --ig-spacing-small- Espaçamento para componentes de pequeno porte
    • --ig-spacing-medium- Espaçamento para componentes de tamanho médio.
    • --ig-spacing-large- Espaçamento para componentes de grande porte

    Directional Spacing Properties

    • --ig-spacing-inline- Controla o espaçamento horizontal
    • --ig-spacing-block- Controla o espaçamento vertical
    • --ig-spacing-inline-small- Espaçamento horizontal para componentes pequenos
    • --ig-spacing-inline-medium- Espaçamento horizontal para componentes do meio
    • --ig-spacing-inline-large- Espaçamento horizontal para componentes grandes
    • --ig-spacing-block-small- Espaçamento vertical para componentes pequenos
    • --ig-spacing-block-medium- Espaçamento vertical para componentes do meio
    • --ig-spacing-block-large- Espaçamento vertical para componentes grandes

    Size Detection Variables

    Os componentes usam propriedades personalizadas CSS para detectar automaticamente seu tamanho atual:

    • --is-small- Definido como 1 quando o componente for pequeno, 0 caso contrário.
    • --is-medium- Definido como 1 quando o componente é de tamanho médio, 0 caso contrário
    • --is-large- Definido como 1 quando o componente é de tamanho grande, 0 caso contrário.
    • --component-size- Valor numérico indicando o tamanho atual (1=pequeno, 2=médio, 3=grande).

    Essas variáveis são gerenciadas automaticamente pelo sistema de tematização e mudam com base na configuração de tamanho do componente, controlada por--ig-size.

    Practical Usage Examples

    Global Spacing Control

    Para tornar todos os componentes mais compactos em todo o aplicativo:

    :root {
  --ig-spacing: 0.8; /* 20% less spacing */
}

    Para aumentar o espaçamento para melhor acessibilidade ao toque:

    :root {
  --ig-spacing: 1.2; /* 20% more spacing */
}

    Component-Specific Spacing

    Para ajustar o espaçamento para um tipo de componente específico:

    .my-grid {
  --ig-spacing: 0.5; /* More compact grid, 50% of the original spacing in all sizes */
}

    Directional Spacing Control

    Para reduzir apenas o espaçamento horizontal, mantendo o espaçamento vertical normal:

    :root {
  --ig-spacing-inline: 0.7;
  --ig-spacing-block: 1.0;
}

    Size-Specific Spacing

    Para personalizar o espaçamento para tamanhos de componentes específicos:

    :root {
  --ig-spacing-small: 0.5;   /* Very tight for small components */
  --ig-spacing-medium: 1.0;  /* Normal for medium components */
  --ig-spacing-large: 1.5;   /* Extra spacious for large components */
}

    How Spacing Multipliers Work

    O sistema de espaçamento usa multiplicadores para dimensionar valores base:

    • Os valores de espaçamento nos componentes são multiplicados pelas variáveis de espaçamento ativas
    • Por exemplo, se um componente tem8px preenchimento base e você configura--ig-spacing: 1.5, o preenchimento real se torna12px
    • Multiplicadores específicos de tamanho, como--ig-spacing-large Override o global--ig-spacing para componentes de grande porte
    • Multiplicadores direcionais permitem--ig-spacing-inline escalar o espaçamento horizontal e vertical de forma independente

    Essa abordagem em cascata garante relacionamentos de espaçamento consistentes, ao mesmo tempo em que oferece controle refinado apenas por meio de propriedades personalizadas CSS.

    API References

    Sizing Functions and Mixins

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.