Tamaño
La configuración del tamaño puede mejorar significativamente la representación visual de grandes cantidades de datos. En Ignite UI for Angular, proporcionamos un conjunto predefinido de opciones:
- grande
- Medio
- pequeño
Using the --ig-size custom CSS property, you can configure the size on an application or a component level.
Angular Size Example
Note
Para comenzar a usar componentes Ignite UI for Angular en sus propios proyectos, asegúrese de haber configurado todas las dependencias necesarias y de haber realizado la configuración adecuada de su proyecto. Puede aprender a hacerlo en el tema de instalación.
Usage
Establecer el tamaño a nivel de aplicación/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
Los componentes utilizan varias propiedades personalizadas de CSS para detectar y responder a los cambios de tamaño:
--component-size- Maps the global--ig-sizeto 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- Set to 1 when component is large-sized, 0 otherwise.
These variables are automatically calculated using mathematical CSS expressions and change whenever --ig-size is modified.
Size Constants
El sistema de tematización define tres constantes de tamaño:
--ig-size-small(value: 1)--ig-size-medium(value: 2)--ig-size-large(value: 3).
Incorporating Size in Your Own Components
Puede hacer que sus componentes personalizados respondan a los cambios de tamaño utilizando las utilidades Sass de Ignite UI. Estas utilidades generan las propiedades personalizadas de CSS necesarias y las expresiones matemáticas en segundo plano.
Using the Sizable Mixin and Function
A continuación, le indicamos cómo crear un componente que responda a la configuración de tamaño 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
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub