Roundness

Ignite UI for Angular allows you to change the shape of components by setting their roundness to a value between 0 and 1.

Overview

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: (
    ...,
    border-radius: (rem(26px), rem(0), rem(26px)),
);

As you can see from the example, the component schema for the Toast defines the border radius as a list of three values. The first value is the default border radius (i.e. when $roundness or --ig-radius-factor is not declared). The second value denotes the minimum allowed border radius (i.e. when $roundness or --ig-radius-factor is set to 0). And the third value denotes the maximum allowed border radius (i.e. when $roundness or --ig-radius-factor is set to 1). In the toast component the default and maximum values match. Any value between 0 and 1 assigned to $roundness or --ig-radius factor will set the border radius of the toast as a percentage of the maximum value. For instance, setting the value to .5 will make the border radius of the Toast component to be 50% of its maximum allowed border radius, which is 13 pixels.

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

How to use?

Let's see how we can change the default values for the toast from the example above.

If you want the toast to still be affected by the $roundness or the --ig-radius-factor variable in the resulting theme, use the border-radius function provided by the Ignite UI for Angular package.

// 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);

If you want the border-radius to be a constant value, unaffected by changes of --ig-radius-factor, just pass it directly to the border-radius parameter.

// 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

The table below shows an excerpt of some of the component border radius values as defined in the Material schema.

Component	Min/Max Radius	Default Radius
Button(Flat)	0 / 20px	4px
Button(Contained)	0 / 20px	4px
button(Fab)	12px / 28px	28px
button(Icon)	0 / 18px	18px
Button-group	0 / 20px	4px
Chip	0 / 20px	4px
Card	0 / 24px	4px
Carousel	0 / 36px	0
Dialog	0 / 36px	4px
Drop-down	0 / 20px	4px
Expansion panel	0 / 16px	0
input(Border)	0 / 20px	4px
input(Box)	0 / 20px	4px 4px 0 0
input(Search)	0 / 20px	4px
List	0 / 24px	0
List item	0 / 24px	0
Navdrawer	0 / 36px	0
Snackbar	0 / 24px	4px
Tooltip	0 / 16px	4px
Toast	0 / 26px	26px

Please refer to the Schema documentation for each component to find out what the default and min/max radius values are for each theme.

Our community is active and always welcoming to new ideas.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub