Redondez

    Ignite UI for Angular permite personalizar la forma de los componentes ajustando su redondez utilizando un valor entre 0 y 1.

    Descripción general

    Muchos componentes de Ignite UI tienen valores mínimos y máximos de radio de borde predefinidos, que pueden ajustarse usando la--ig-radius-factor variable CSS.

    Cuando lo pones--ig-radius-factor en 0, el componente usa su radio mínimo de borde y parecerá más bloqueado con esquinas afiladas. Cuando se establece en 1, el componente utiliza su radio máximo de borde predefinido y aparecerá redondeado.

    Aquí hay una lista de los componentes que tienen valores mínimos y máximos predefinidos en el radio de borde y que pueden modificarse usando la--ig-radius-factor variable:
    • Tira de Acciones • Botón • Grupo de Botones • Calendario • Tarjeta • Carrusel • Casilla de Verificación • Chip • Combo • Selector de fechas • Selector de intervalo de fechas • Cuadrícula • Grupo de entrada • Progreso lineal • Lista • Selector de mes • Cajón de navegación • Radio • Ripple • Snackbar • Switch • Toast

    Usage

    Para cambiar entre los dos valores del radio de borde de un componente, apunta al selector de elementos y simplemente establece la--ig-radius-factor variable en 0 o 1:

    igx-chip {
   --ig-radius-factor: 0;
}

    Esto aplicará el radio de borde mínimo predefinido, lo que dará como resultado que el componente Chip tenga esquinas rectas.

    igx-chip {
    --ig-radius-factor: 1;
}

    Y al establecer el valor en 1, se aplica el radio de borde predefinido máximo, lo que da como resultado esquinas redondeadas para el componente Chip.

    Si quieres que el radio de borde esté entre los valores mínimos y máximos definidos, puedes establecer la--ig-radius-factor variable en un valor decimal entre 0 y 1. Por ejemplo, al configurarlo en0.5 aplicará un radio de borde que es el 50% del valor máximo permitido del componente.

    igx-chip {
    --ig-radius-factor: 0.5;
}

    Puede ver la diferencia entre los valores mínimo y máximo de radio de borde en el siguiente ejemplo:

    Additional Resources

    Temas relacionados:

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