Redondez

    Ignite UI for Angular le permite cambiar la forma de los componentes estableciendo su redondez en un valor entre 0 y 1.

    Descripción general

    El radio del borde se define en el esquema del tema del componente (consulte el ejemplo a continuación). El radio del borde para cualquier componente definido de esta manera se puede controlar mediante el parámetro $roundness del mixin del tema o una única variable CSS llamada--ig-radius-factor.

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

    Como puede ver en el ejemplo, el esquema del componente Toast define el radio del borde como una lista de tres valores. El primer valor es el radio del borde predeterminado (es decir, cuando no se declara $roundness o--ig-radius-factor). El segundo valor indica el radio de borde mínimo permitido (es decir, cuando $roundness o--ig-radius-factor se establece en 0). Y el tercer valor denota el radio de borde máximo permitido (es decir, cuando $roundness o--ig-radius-factor se establece en 1). En el componente del sistema, los valores predeterminados y máximos coinciden. Cualquier valor entre 0 y 1 asignado al--ig-radius factor​ ​$roundness o --ig-radius establecerá el radio del borde del brindis como un porcentaje del valor máximo. Por ejemplo, establecer el valor en.5 hará que el radio del borde del componente Toast sea el 50% de su radio de borde máximo permitido, que es 13 píxeles.

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

    How to use?

    Veamos cómo podemos cambiar los valores predeterminados para el brindis en el ejemplo anterior.

    Si desea que el brindis aún se vea afectado por la variable $roundness o--ig-radius-factor en el tema resultante, use la función border-radius proporcionada por la Ignite UI for Angular.

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

@include css-vars($toast-theme);

    Si desea que el radio del borde sea un valor constante, que no se vea afectado por los cambios de--ig-radius-factor, simplemente páselo directamente al parámetro radio del borde.

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

@include css-vars($toast-theme);

    Baseline border radius values

    La siguiente tabla muestra un extracto de algunos de los valores del radio del borde del componente tal como se define en el esquema Material.

    Componente Radio mínimo/máximo Radio predeterminado
    Botón (plano) 0/20px 4px
    Botón (contenido) 0/20px 4px
    botón (fabuloso) 12px / 28px 28px
    botón (icono) 0/18px 18px
    grupo de botones 0/20px 4px
    Chip 0/20px 4px
    Tarjeta 0/24px 4px
    Carrusel 0 / 36px 0
    Diálogo 0 / 36px 4px
    Desplegable 0/20px 4px
    Panel de expansión 0/16px 0
    entrada (borde) 0/20px 4px
    entrada (cuadro) 0/20px 4px 4px 0 0
    entrada(Buscar) 0/20px 4px
    Lista 0/24px 0
    Elemento de lista 0/24px 0
    cajón de navegación 0 / 36px 0
    snack bar 0/24px 4px
    Información sobre herramientas 0/16px 4px
    Tostada 0 / 26px 26px

    Consulte la documentación del esquema de cada componente para descubrir cuáles son los valores de radio predeterminados y mínimo/máximo para cada tema.

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.