Redondez

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

    Descripción general

    El radio de borde se define en el esquema temático del componente (véase el ejemplo más abajo). El radio de borde de cualquier componente definido de esta manera puede controlarse mediante el$roundness parámetro del mixin del tema o una única variable CSS llamada--ig-radius-factor.

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

    Como puedes ver en el ejemplo, el esquema de componentes para el Toast define el radio del borde como una lista de tres valores. El primer valor es el radio de borde por defecto (es decir, cuando$roundness se declara o--ig-radius-factor no). El segundo valor denota el radio mínimo permitido del borde (es decir, cuándo$roundness o--ig-radius-factor se establece en ).0 Y el tercer valor denota el radio máximo permitido del borde (es decir, cuando$roundness o--ig-radius-factor está configurado a).1 En el componente tostado, los valores por defecto y máximo coinciden. Cualquier valor entre 0 y 1 asignado a$roundness o--ig-radius factor establecerá el radio de borde de la tostada 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 máximo permitido, que es de 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 quieres que el toast siga siendo afectado por la$roundness variable o--ig-radius-factor la variable en el tema resultante, usa laborder-radius función que proporciona el paquete 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))};
}

    Si quieres que el radio de frontera sea un valor constante, sin cambios de área--ig-radius-factor, simplemente pásalo directamente al parámetro de radio de frontera.

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

    También podemos usar elborder-radius mixin para asignar directamente la propiedad de radio de borde a los elementos.

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

    Ahora, elborder-radius botón de encendido se verá afectado por las$roundness variables y--ig-radius-factor.

    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.