Redondeza

    Ignite UI for Angular permite que você altere o formato dos componentes definindo sua redondeza para um valor entre 0 e 1.

    Visão geral

    O raio da borda é definido no esquema do tema do componente (veja o exemplo abaixo). O raio da borda para qualquer componente definido dessa maneira pode então ser controlado por meio do parâmetro $roundness do mixin do tema ou de uma única variável CSS chamada--ig-radius-factor.

    $light-toast: extend(
    $default-elevation-toast,
    (
        ...,
        border-radius: (
            border-radius: (
                rem(26px),
                rem(0),
                rem(26px),
            ),
        ),
    )
);

    Como você pode ver no exemplo, o esquema do componente para o Toast define o raio da borda como uma lista de três valores. O primeiro valor é o raio da borda padrão (ou seja, quando $roundness ou--ig-radius-factor não é declarado). O segundo valor denota o raio mínimo permitido da borda (ou seja, quando $roundness ou--ig-radius-factor é definido como 0). E o terceiro valor denota o raio máximo permitido da borda (ou seja, quando $roundness ou--ig-radius-factor é definido como 1). No componente toast, os valores padrão e máximo correspondem. Qualquer valor entre 0 e 1 atribuído a $roundness ou--ig-radius factor definirá o raio da borda do toast como uma porcentagem do valor máximo. Por exemplo, definir o valor como.5 fará com que o raio da borda do componente Toast seja 50% do seu raio máximo permitido, que é 13 pixels.

    // Make all components sharp by setting the roundness parameter to 0.
@include theme(
    ...,
    $roundness: 0
);

    How to use?

    Vamos ver como podemos alterar os valores padrão do toast do exemplo acima.

    Se você quiser que o toast ainda seja afetado pela variável $roundness ou--ig-radius-factor no tema resultante, use a função border-radius fornecida pelo pacote Ignite UI for Angular.

    // Change the default, min and max values,
// while preserving customization via $roundness or --ig-radius-factor.
igx-toast {
  --border-radius: #{border-radius(rem(4px), rem(4px), rem(16px))};
}

    Se você quiser que o border-radius seja um valor constante, não afetado por alterações de--ig-radius-factor, basta passá-lo diretamente para o parâmetro border-radius.

    // Will be unaffected by changes to $roundess or --ig-radius-factor.
igx-toast {
  --border-radius: rem(4px);
}

    Também podemos usar o mixin border-radius para atribuir diretamente a propriedade border-radius aos elementos.

    button {
    @include border-radius(rem(4px), rem(4px), rem(16px));
}

    Agora o border-radius no botão será afetado pelas variáveis $roundness e--ig-radius-factor.

    Baseline border radius values

    A tabela abaixo mostra um trecho de alguns dos valores de raio de borda do componente, conforme definido no esquema do Material.

    Componente Raio Mín./Máx. Raio Padrão
    Botão (plano) 0 / 20px 4px
    Botão (contido) 0 / 20px 4px
    botão(Fab) 12px / 28px 28 px
    botão(Ícone) 0 / 18px 18 px
    Grupo de botões 0 / 20px 4px
    Cavaco 0 / 20px 4px
    Cartão 0 / 24px 4px
    Carrossel 0 / 36px 0
    Diálogo 0 / 36px 4px
    Suspenso 0 / 20px 4px
    Painel de expansão 0 / 16px 0
    entrada(Fronteira) 0 / 20px 4px
    entrada(Caixa) 0 / 20px 4px 4px 0 0
    entrada(Pesquisar) 0 / 20px 4px
    Lista 0 / 24px 0
    Item da lista 0 / 24px 0
    Gaveta de navegação 0 / 36px 0
    Lanchonete 0 / 24px 4px
    Dica de ferramenta 0 / 16px 4px
    Brindar 0 / 26px 26px

    Consulte a documentação do Schema para cada componente para descobrir quais são os valores padrão e de raio mínimo/máximo para cada tema.

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.