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

    Usando la--ig-size propiedad CSS personalizada, puedes configurar el tamaño a nivel de aplicación o componente.

    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

    Para establecer el tamaño, usa la--ig-size propiedad personalizada CSS. Puedes establecer el tamaño de todos los componentes en tu app configurando la propiedad mencionada en el elemento cuerpo.

    Los valores disponibles para--ig-size son--ig-size-small,--ig-size-medium, y--ig-size-large.

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

    Para establecer el tamaño a nivel de componente, apunta al selector de elementos. Por ejemplo, para establecer el tamaño del grupo de entrada a,small puedes hacer:

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

    Understanding Size with CSS Custom Properties

    El sistema de dimensionamiento en Ignite UI funciona mediante un conjunto de propiedades personalizadas CSS que ajustan automáticamente las dimensiones y el espaciado de los componentes. Cuando cambias la--ig-size propiedad, los componentes detectan automáticamente este cambio y aplican los valores de tamaño apropiados.

    Size Detection Variables

    Los componentes utilizan varias propiedades personalizadas de CSS para detectar y responder a los cambios de tamaño:

    • --component-size- Mapea el global--ig-size a un valor numérico (1=pequeño, 2=medio, 3=grande)
    • --is-small- Establecer a 1 cuando el componente es de tamaño pequeño, 0 en caso contrario
    • --is-medium- Establecer a 1 cuando el componente es de tamaño medio, 0 en caso contrario.
    • --is-large- Establecer a 1 cuando el componente es de tamaño grande, 0 en caso contrario.

    Estas variables se calculan automáticamente usando expresiones matemáticas CSS y cambian cada vez que--ig-size se modifican.

    Size Constants

    El sistema de tematización define tres constantes de tamaño:

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

    Cuando lo usas@include sizable(), genera propiedades personalizadas CSS que detectan el tamaño actual del 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);
}

    Lasizable(10px, 20px, 30px) función genera una expresión CSS que selecciona automáticamente el valor apropiado:

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

    Este enfoque matemático usandoclamp() funciones ymin()​max()​calc() permite que los componentes cambien automáticamente entre valores de tamaño según la configuración actual.--ig-size​

    API References

    Sizing and Spacing Functions

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.