Tamaño (densidad de visualización)

    La configuración del tamaño (densidad de visualización) puede mejorar significativamente la representación visual de grandes cantidades de datos. En Ignite UI for Angular, proporcionamos un conjunto predefinido de opciones: grande (cómodo), mediano (acogedor) y pequeño (compacto).

    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.