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--ig-size propriedade CSS personalizada, você pode configurar o tamanho em nível de aplicação 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--ig-size propriedade personalizada CSS. Você pode definir o tamanho de todos os componentes no seu app definindo a propriedade mencionada no elemento corpo.

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 nível de componente, mire no seletor de elementos. Por exemplo, para definir o tamanho do grupo de entrada parasmall, você pode fazer:

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

Understanding Size with CSS Custom Properties

O sistema de dimensionamento em Ignite UI funciona por meio de um conjunto de propriedades CSS personalizadas que ajustam automaticamente as dimensões e o espaçamento dos componentes. Quando você muda a--ig-size propriedade, os componentes detectam automaticamente essa mudança 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- Definir como 1 quando o componente for de tamanho pequeno, 0 caso contrário
--is-medium- Definido como 1 quando o componente for de tamanho médio, 0 caso contrário.
--is-large- Definido como 1 quando o componente é de tamanho grande, 0 caso contrário.

Essas variáveis são calculadas automaticamente usando expressões matemáticas CSS 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);
}

Asizable(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 usandoclamp() funções ,min(),max(), ecalc() permite que os componentes alternem automaticamente entre 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.