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
Many Ignite UI components have predefined minimum and maximum border-radius values, which can be adjusted using the --ig-radius-factor CSS variable.
When you set --ig-radius-factor to 0, the component uses its minimum border-radius and will appear more block-like with sharp corners. When set to 1, the component uses its maximum predefined border-radius and will appear rounded.
Here is a list of the components that have predefined minimum and maximum border-radius values and can be modified using the --ig-radius-factor variable:
• Action Strip • Button • Button Group • Calendar • Card • Carousel • Checkbox • Chip • Combo • Date Picker • Date Range Picker • Grid • Input Group • Linear Progress • List • Month Picker • Navigation Drawer • Radio • Ripple • Snackbar • Switch • Toast
Usage
To switch between the two border-radius values on a component, target the element selector and simply set the --ig-radius-factor variable to either 0 or 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.
If you want the border-radius to be somewhere between the defined minimum and maximum values, you can set the --ig-radius-factor variable to a decimal value between 0 and 1.
For example, setting it to 0.5 will apply a border-radius that is 50% of the component's maximum allowed value.
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.
GitHub