Redondeza

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

    Visão geral

    Muitos componentes Ignite UI têm valores mínimos e máximos de raio de borda predefinidos, que podem ser ajustados usando a--ig-radius-factor variável CSS.

    Quando você define--ig-radius-factor como 0, o componente usa seu raio de borda mínimo e aparecerá mais parecido com um bloco com cantos agudos. Quando definido como 1, o componente usa seu raio de borda máximo predefinido e aparecerá arredondado.

    Aqui está uma lista dos componentes que têm valores mínimos e máximos de raio de borda predefinidos e podem ser modificados usando a--ig-radius-factor variável:
    • Faixa de Ação • Botão • Grupo de Botões • Calendário • Cartão • Carrossel • Caixa de Seleção • Chip • Combo • Seletor de Datas • Seletor de Intervalo de Datas • Grade • Grupo de Entrada • Progresso Linear • Lista • Seletor de Mês • Gaveta de Navegação • Rádio • Ondulação • Snackbar • Interruptor•Brinde​​

    Usage

    Para alternar entre os dois valores de raio de borda em um componente, direcione o seletor de elementos e simplesmente defina a--ig-radius-factor variável como 0 ou 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.

    Se você quiser que o border-radius esteja em algum lugar entre os valores mínimo e máximo definidos, você pode definir a--ig-radius-factor variável como um valor decimal entre 0 e 1. Por exemplo, defini-lo como 0.5 aplicará um raio de borda que é 50% do valor máximo permitido do componente.

    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.