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

Using the --ig-size custom CSS property, you can configure the size on an application or a component level.

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

To set the size, use the --ig-size CSS custom property. You can set the size for all components in your app by setting the aforementioned property on the body element.

The available values for --ig-size are --ig-size-small, --ig-size-medium, and --ig-size-large.

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

To set the size on a component level, target the element selector. For instance, to set the size of the input group to small, you can do:

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

Understanding Size with CSS Custom Properties

The sizing system in Ignite UI works through a set of CSS custom properties that automatically adjust component dimensions and spacing. When you change the --ig-size property, components automatically detect this change and apply the appropriate sizing values.

Size Detection Variables

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

--component-size - Maps the global --ig-size to a numeric value (1=small, 2=medium, 3=large)
--is-small - Set to 1 when component is small-sized, 0 otherwise
--is-medium - Set to 1 when component is medium-sized, 0 otherwise.
--is-large- Definido como 1 quando o componente é de tamanho grande, 0 caso contrário.

These variables are automatically calculated using mathematical CSS expressions and change whenever --ig-size is modified.

Size Constants

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

--ig-size-small (value: 1)
--ig-size-medium (value: 2)
--ig-size-large (value: 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

When you use @include sizable(), it generates CSS custom properties that detect the current component size:

.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);
}

The sizable(10px, 20px, 30px) function generates a CSS expression that automatically selects the appropriate value:

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

This mathematical approach using clamp(), min(), max(), and calc() functions allows components to automatically switch between size values based on the current --ig-size setting.

API References

Sizing and Spacing Functions

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.