Spacing

    La configuración del espaciado puede mejorar significativamente la representación visual de grandes cantidades de datos. En Ignite UI for Angular, proporcionamos un conjunto predefinido de opciones para ajustar los rellenos y los márgenes.

    En lugar de usar valores fijos, usamos propiedades personalizadas de CSS para ajustar el espaciado en un nivel de aplicación o componente.

    How Spacing Works

    Ignite UI for Angular proporciona un sofisticado sistema de espaciado que escala dinámicamente en función del tamaño de los componentes (pequeño, mediano, grande). El sistema de espaciado se basa en propiedades personalizadas de CSS que le permiten controlar el espaciado a nivel global o de componente sin escribir CSS personalizado.

    The Relationship Between Sizing and Spacing

    El sistema de espaciado en Ignite UI está estrechamente relacionado con el tamaño de los componentes. Los componentes pueden tener tres tamaños diferentes:

    • Pequeño: espaciado compacto para diseños densos
    • Medium - Default balanced spacing.
    • Grande: espaciado cómodo para interfaces táctiles

    El espaciado se adapta automáticamente en función del tamaño activo, lo que garantiza una jerarquía visual coherente en toda la aplicación.

    Core CSS Custom Properties

    El sistema de espaciado gira en torno a varias propiedades personalizadas clave de CSS:

    Global Spacing Properties

    • --ig-spacing- El multiplicador base de separación (por defecto: 1)
    • --ig-spacing-small- Espaciado para componentes de tamaño pequeño
    • --ig-spacing-medium- Espaciado para componentes de tamaño medio.
    • --ig-spacing-large- Espaciado para componentes de gran tamaño

    Directional Spacing Properties

    • --ig-spacing-inline- Controla el espaciado horizontal
    • --ig-spacing-block- Controla el espaciamiento vertical
    • --ig-spacing-inline-small- Espaciado horizontal para componentes pequeños
    • --ig-spacing-inline-medium- Espaciado horizontal para componentes del medio
    • --ig-spacing-inline-large- Espaciado horizontal para componentes grandes
    • --ig-spacing-block-small- Espaciado vertical para componentes pequeños
    • --ig-spacing-block-medium- Espaciado vertical para componentes del medio
    • --ig-spacing-block-large- Espaciado vertical para componentes grandes

    Size Detection Variables

    Los componentes utilizan propiedades personalizadas de CSS para detectar automáticamente su tamaño actual:

    • --is-small- Establezca a 1 cuando el componente es de tamaño pequeño, 0 en caso contrario.
    • --is-medium- Establezca 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.
    • --component-size- Valor numérico que indica el tamaño de la corriente (1=pequeño, 2=medio, 3=grande).

    Estas variables son gestionadas automáticamente por el sistema de tematización y cambian según la configuración de tamaño del componente, controlada por--ig-size.

    Practical Usage Examples

    Global Spacing Control

    Para que todos los componentes sean más compactos en toda su aplicación:

    :root {
  --ig-spacing: 0.8; /* 20% less spacing */
}

    Para aumentar el espaciado para una mejor accesibilidad táctil:

    :root {
  --ig-spacing: 1.2; /* 20% more spacing */
}

    Component-Specific Spacing

    Para ajustar el espaciado de un tipo de componente específico:

    .my-grid {
  --ig-spacing: 0.5; /* More compact grid, 50% of the original spacing in all sizes */
}

    Directional Spacing Control

    Para reducir solo el espaciado horizontal mientras se mantiene el espaciado vertical normal:

    :root {
  --ig-spacing-inline: 0.7;
  --ig-spacing-block: 1.0;
}

    Size-Specific Spacing

    Para personalizar el espaciado de tamaños de componentes específicos:

    :root {
  --ig-spacing-small: 0.5;   /* Very tight for small components */
  --ig-spacing-medium: 1.0;  /* Normal for medium components */
  --ig-spacing-large: 1.5;   /* Extra spacious for large components */
}

    How Spacing Multipliers Work

    El sistema de espaciado utiliza multiplicadores para escalar los valores base:

    • Los valores de espaciado en los componentes se multiplican por las variables de espaciado activas
    • Por ejemplo, si un componente tiene8px relleno base y lo estableces--ig-spacing: 1.5, el relleno real se convierte en12px
    • Multiplicadores específicos de tamaño como--ig-spacing-large anular el global--ig-spacing para componentes de gran tamaño
    • Multiplicadores direccionales permiten--ig-spacing-inline escalar el espaciado horizontal y vertical de forma independiente

    Este enfoque en cascada garantiza relaciones de espaciado consistentes al tiempo que le brinda un control detallado solo a través de las propiedades personalizadas de CSS.

    API References

    Sizing Functions and Mixins

    Additional Resources

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