Redondeza

    Ignite UI for Angular permite personalizar a forma dos componentes ajustando seu arredondamento usando um valor entre 0 e 1.

    Visão geral

    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;
}

    Isso aplicará o raio de borda mínimo predefinido, resultando no componente Chip com cantos retos.

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

    E ao definir o valor como 1, o raio máximo da borda predefinido é aplicado, resultando em cantos arredondados para o 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;
}

    Você pode ver a diferença entre os valores mínimo e máximo de border-radius no exemplo abaixo:

    Additional Resources

    Tópicos relacionados:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.