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, ofrecemos un conjunto predefinido de opciones: grandes, medianas y pequeñas.

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

Angular Size Example

Note

Para comenzar a usar Ignite UI for Angular en sus propios proyectos, asegúrese de haber configurado todas las dependencias necesarias y haber realizado la configuración adecuada de su proyecto. Puede aprender cómo hacer esto en el tema de instalación.

Usage

Establecer el tamaño a nivel de aplicación/componente

Para establecer el tamaño, utilice la propiedad personalizada CSS--ig-size. Puede establecer el tamaño de todos los componentes de su aplicación configurando la propiedad antes mencionada en el elemento del 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, apunte al selector de elementos. Por ejemplo, para establecer el tamaño del grupo de entrada en small, puede hacer:

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

Incorporating size in your own components and layouts

Ignite UI for Angular expone algunas funciones de Sass y un mixin que le permiten implementar diseños que reaccionan a los cambios de la propiedad CSS--ig-size.

Aquí hay un ejemplo de cómo podemos hacer que un elemento cambie su ancho y alto según el valor de--ig-size.

<div class="my-elem"></div>

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

.my-elem {
    // Make the element sizable
    @include sizable();

    // Define the default size of the element and hook it to the `--ig-size` property
    --component-size: var(--ig-size, var(--ig-size-large));

    // Define sizes for small (10px), medium (20px), and large (30px)
    --size: #{sizable(10px, 20px, 30px)};
    width: var(--size);
    height: var(--size);
}

Ahora, cada vez que cambie el valor de--ig-size,.my-elem cambiará su tamaño.

API References

Sizing and Spacing Functions

Additional Resources

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