Tamanho

A configuração de tamanho pode melhorar significativamente a representação visual de grandes quantidades de dados. No Ignite UI for Angular, fornecemos um conjunto predefinido de opções:

grande
médio
pequeno

Usando a propriedade CSS personalizada--ig-size, você pode configurar o tamanho em nível de aplicativo ou componente.

Angular Size Example

Note

Para começar a usar Ignite UI for Angular em seus próprios projetos, certifique-se de ter configurado todas as dependências necessárias e de ter realizado a configuração adequada do seu projeto. Você pode aprender como fazer isso no tópico de instalação.

Usage

Definir tamanho em nível de aplicativo/componente

Para definir o tamanho, use a propriedade personalizada CSS--ig-size. Você pode definir o tamanho para todos os componentes em seu aplicativo definindo a propriedade mencionada acima no elemento body.

Os valores disponíveis para--ig-size são--ig-size-small,--ig-size-medium e--ig-size-large.

body {
    --ig-size: var(--ig-size-small);
}

Para definir o tamanho em um nível de componente, direcione o seletor de elementos. Por exemplo, para definir o tamanho do grupo de entrada para small, você pode fazer:

igx-input-group {
    --ig-size: var(--ig-size-small);
}

Understanding Size with CSS Custom Properties

O sistema de dimensionamento no Ignite UI funciona por meio de um conjunto de propriedades personalizadas CSS que ajustam automaticamente as dimensões e o espaçamento dos componentes. Quando você altera a propriedade, os--ig-size componentes detectam automaticamente essa alteração e aplicam os valores de dimensionamento apropriados.

Size Detection Variables

Os componentes usam várias propriedades personalizadas CSS para detectar e responder a alterações de tamanho:

--component-size- Mapeia o global--ig-size para um valor numérico (1=pequeno, 2=médio, 3=grande)
--is-small- Defina como 1 quando o componente for pequeno, 0 caso contrário
--is-medium- Defina como 1 quando o componente for de tamanho médio, 0 caso contrário.
--is-large- Defina como 1 quando o componente for grande, 0 caso contrário.

Essas variáveis são calculadas automaticamente usando expressões CSS matemáticas e mudam sempre que--ig-size são modificadas.

Size Constants

O sistema de temas define três constantes de tamanho:

--ig-size-small (valor: 1)
--ig-size-medium (valor: 2)
--ig-size-large (valor: 3).

Incorporating Size in Your Own Components

Você pode tornar seus componentes personalizados responsivos às alterações de tamanho usando os utilitários Sass do Ignite UI. Esses utilitários geram as propriedades personalizadas CSS necessárias e expressões matemáticas nos bastidores.

Using the Sizable Mixin and Function

Veja como criar um componente que responda à configuração de tamanho global:

<div class="my-responsive-element"></div>

@use "igniteui-angular/theming" as *;

.my-responsive-element {
    // The sizable mixin sets up size detection CSS custom properties
    @include sizable();

    // Connect to the global size system
    --component-size: var(--ig-size, var(--ig-size-large));

    // Use the sizable function for responsive sizing
    --size: #{sizable(10px, 20px, 30px)};
    width: var(--size);
    height: var(--size);
}

How the Sizable System Works Behind the Scenes

Quando você usa @include sizable(), ele gera propriedades personalizadas CSS que detectam o tamanho atual do componente:

.my-responsive-element {
    --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
    --is-medium: min(
        clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
        clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
    );
    --is-small: clamp(0, var(--ig-size-medium, 2) - var(--component-size, 1), 1);
}

A sizable(10px, 20px, 30px) função gera uma expressão CSS que seleciona automaticamente o valor apropriado:

--size: max(
    calc(var(--is-large, 1) * 30px),
    calc(var(--is-medium, 1) * 20px), 
    calc(var(--is-small, 1) * 10px)
);

Essa abordagem matemática usando clamp() funções , min(), max(), e calc() permite que os componentes alternem automaticamente entre os valores de tamanho com base na configuração atual--ig-size.

API References

Sizing and Spacing Functions

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.