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 possuem 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 para 0, o componente usa seu raio mínimo de borda e vai parecer mais bloco com cantos marcantes. Quando definido como 1, o componente usa seu raio máximo de borda predefinido e aparecerá arredondado.

    Aqui está uma lista dos componentes que possuem valores mínimos e máximos de raio de borda predefinidos e que podem ser modificados usando a variável--ig-radius-factor:
    • Action Strip • Botão •Grupo de Botões • Calendário • Cartão • Carrossel • Caixa de seleção • Chip • Combo • Seletor de Data • Seletor de Intervalo de Data • Grade • Grupo de Entrada • Progresso Linear • Lista • Seletor de Meses • Gaveta de Navegação • Rádio • Ripple • Snackbar • Switch • Toast

    Usage

    Para alternar entre os dois valores de raio de borda em um componente, mire no seletor de elementos e simplesmente defina a--ig-radius-factor variável para 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 raio da borda fique em algum lugar entre os valores mínimos e máximos definidos, pode definir a--ig-radius-factor variável para um valor decimal entre 0 e 1. Por exemplo, configurá-lo0.5 para 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.