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
Border radius is defined in the theme schema of the component (see the example below). The border radius for any component defined in this manner can then be controlled via the $roundness
parameter of the theme mixin or a single CSS variable called --ig-radius-factor
.
$light-toast: extend(
$default-elevation-toast,
(
...,
border-radius: (
border-radius: (
rem(26px),
rem(0),
rem(26px),
),
),
)
);
scss
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
);
scss
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.
igx-toast {
--border-radius: #{border-radius(rem(4px), rem(4px), rem(16px))};
}
scss
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.
igx-toast {
--border-radius: rem(4px);
}
scss
We can also use the border-radius
mixin to directly assign the border-radius property to elements.
button {
@include border-radius(rem(4px), rem(4px), rem(16px));
}
scss
Now the border-radius
on the button will be affected by the $roundness
and --ig-radius-factor
variables.
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.