Personalización de temas en Ignite UI for Web Components

    Los temas de Ignite UI for Web Components se pueden personalizar modificando varias variables CSS. Al sobrescribir esas variables, puede personalizar las paletas, la tipografía, las elevaciones, la redondez, el tamaño y el espaciado.

    Descripción general

    Cubrimos paletas, tipografía y elevaciones en las siguientes secciones, mientras que esta cubrirá opciones que afectan los estilos de componentes a nivel global a través de modificaciones de una sola variable.

    Roundness

    Todos los componentes definen algún tipo de redondez (radio de borde). Mientras que algunos componentes proporcionan atributos para configurar la forma del componente, como el avatar y la insignia, otros, como el botón, solo definen su radio de borde internamente como parte del tema. En esos casos, puedes jugar con el radio del borde de esos componentes modificando el valor de la variable CSS--ig-radius-factor. Puede modificarlo globalmente en el ámbito:root, o puede modificarlo componente por componente. La variable acepta un valor de número racional entre 0 y 1. Establecer el valor en 0 establece efectivamente el radio del borde en 0. Establecer el valor en 1 establece el radio del borde en el radio del borde inicial predefinido. Cualquier valor entre 0 y 1, como 0,5 por ejemplo, establecerá el radio del borde en el 50% del radio del borde predeterminado definido en la hoja de estilo del componente.

    Examples:

    /* Set the border-radius for all components to 50% of their default value. */
:root {
    --ig-radius-factor: .5;
}

    /* Set the border-radius of the button component to 0. */
igc-button {
    --ig-radius-factor: 0;
}

    Elevation

    De manera similar al radio global, algunos componentes definen la elevación interna (cuadro-sombra). Hacer que todos los componentes sean planos puede resultar tedioso si lo hacemos sobrescribiendo la sombra del cuadro de cada uno. Puede modificar el comportamiento de la sombra del cuadro para todos los componentes modificando la variable CSS--ig-elevation-factor. La variable acepta un valor de número racional entre 0 y 1. Establecer el valor en 0 efectivamente establece la sombra del cuadro de todos los componentes en ninguno. Establecer el valor en 1 establece el valor de elevación en los valores iniciales predefinidos de sombra del cuadro. Cualquier valor entre 0 y 1, como 0,5 por ejemplo, establecerá la intensidad de la sombra del cuadro en el 50% del valor original definido en la hoja de estilo del componente.

    /* Set the elevation for all components to 50% of their original box-shadow values. */
:root {
    --ig-elevation-factor: .5;
}

    Tamaño

    Algunos componentes admiten tamaños variables: small, medium y large, con un tamaño predeterminado establecido en la hoja de estilo del componente. Puede modificar el tamaño de todos los componentes simultáneamente o individualmente utilizando la variable CSS--ig-size. Los valores posibles son var(--ig-size-small), var(--ig-size-medium) o var(--ig-size-large);

    Para establecer un tamaño específico para todos los componentes de su aplicación, defina la variable--ig-size en el alcance:root.

    Ejemplo:

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

    Alternativamente, si desea apuntar solo a un componente específico, limite la variable al selector de etiquetas del componente.

    igc-avatar {
    --ig-size: var(--ig-size-medium);
}

    Spacing

    El espaciado se refiere a los rellenos y márgenes internos del componente según lo establecido por el tema del componente. El espaciado puede ser horizontal (en línea) y vertical (bloque). Hemos facilitado el control de cómo se rellenan varios elementos dentro de un componente, sin sobrescribir explícitamente todos los valores de margen y relleno manualmente para cada componente. Esto se hace mediante la variable CSS--ig-spacing. Puedes establecer su valor en cualquier número racional positivo. El espaciado se escalará en consecuencia. El valor predeterminado es 1, que representa el margen/relleno horizontal/vertical predeterminado según lo establecido en la hoja de estilo del componente. Cambiar el valor a 1,5 escalará todo el espaciado 1,5 veces o 150%. Por el contrario, establecer el valor en 0 agrupará todo y reducirá todo el espacio al equivalente de sin relleno/margen. Cambiar el factor de espaciado funciona en conjunto con la propiedad de tamaño y se escalará en consecuencia.

    Algunos componentes sólo le permiten modificar su espaciado en una dirección (horizontal o verticalmente), mientras que otros le permiten especificar valores de espaciado separados en ambas direcciones.

    Para modificar el espaciado de todos los componentes, puede sobrescribir su valor en el alcance:root.

    Ejemplo:

    /* Increase the spacing for all components to 150%. */
:root {
    --ig-spacing: 1.5;
}

    Para cambiar el espaciado de un solo componente, limite la variable al selector de etiquetas del componente.

    /* Reduce the spacing for the drop-down elements to 50% of their original value. */
igc-dropdown {
    --ig-spacing: 0.5;
}

    Como se mencionó anteriormente, puede controlar el espaciado horizontal y vertical individualmente para los componentes que lo soportan. Esto se puede lograr modificando las variables--ig-spacing-inline (horizontal) y--ig-spacing-block (vertical). El principio es el mismo que con la variable--ig-spacing. Modificar solo la variable--ig-spacing cambiará el espaciado en ambas direcciones en la misma cantidad.

    API References

    • ConfigureTheme