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 tema do componente (veja o exemplo abaixo). O raio da borda de qualquer componente definido dessa forma pode então ser controlado pelo$roundness parâmetro do tema mixin ou por 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 de componentes para o Toast define o raio da borda como uma lista de três valores. O primeiro valor é o raio padrão da borda (ou seja, quando$roundness ou--ig-radius-factor não é declarado). O segundo valor denota o raio mínimo permitido na borda (ou seja, quando$roundness ou--ig-radius-factor é definido para0). E o terceiro valor denota o raio máximo permitido da borda (ou seja, quando$roundness ou--ig-radius-factor é definido para1). No componente toast, os valores padrão e máximo coincidem. 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 para.5 fará com que o raio da borda do componente Toast seja 50% do 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 a torrada ainda seja afetada pelo$roundness ou pela--ig-radius-factor variável no tema resultante, use aborder-radius função 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 raio da borda seja um valor constante, sem alterações--ig-radius-factor, basta passar diretamente para o parâmetro do raio da borda.

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

    Também podemos usar oborder-radius mixin para atribuir diretamente a propriedade de raio de borda aos elementos.

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

    Agora oborder-radius botão de ligar será afetado pelas$roundness variáveis e (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.