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
Roundness, as any other property, is set in the global and component themes, or schema like it's shown in the examples below.
// Make all components sharp by setting the roundness factor to 0.
@include theme(
...,
$roundness: 0
);
Alternatively, you can modify the schema for each individual component to default to some value; Note that the global configuration will always take presedence.
$_material-shape-button: (
border-radius: .2
);
As you can see from the example above, the component schema for the Button Theme defines the default border-radius for all types of buttons.
Let's look at how this works.
The default border-radius
value is set to .2
, which in the end will be resolved to 4px. This fraction, between 0 and 1 represents the minimum and maximum allowed roundness. 0 is the minimum border-radius, i.e. 0px and 1 is the maximum or 20px. The minimum and maximum pixel values are defined for each individual component in its Sass theme.
We decided to not limit you to fractions only. You can use whatever unit you want - pixels, relative units (em or rem), etc., allowing you to overwrite the implicit border radius limits.
If you decide to go with fractions, you will automatically be limited by the theming engine to min and max values for each component.
Usage
Let's see how we can change the default values for the buttons from the example above.
Using the theme mixin:
$my-button-theme: button-theme(
$border-radius: .5 .2 .5 .2, // resolves to 10px 4px 10px 4px
);
@include button($my-button-theme);
Using a component schema:
$my-flat-button: extend(
$_material-flat-button,
(
border-radius: .5 .2 .5 .2
)
);
$my-light-schema: extend(
$_material-light-schema,
(
igx-button: $my-flat-button
)
);
@include theme(
$palette: $light-material-palette,
$schema: $my-light-schema
);
Using either approach, the result from the above code snippets is:
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free.
Baseline Roundness
The table below shows the default roundness for each component and its min and max boundaries:
Corners can be shaped? | Min/Max boundaries | Baseline theme values | |
---|---|---|---|
Button(Flat) | Yes; Yes; Yes; Yes; | 0 - 20px | 4px |
Button(Raised) | Yes; Yes; Yes; Yes; | 0 - 20px | 4px |
button(Fab) | Yes; Yes; Yes; Yes; | 12px - 28px | 28px |
button(Icon) | Yes; Yes; Yes; Yes; | 0 - 18px | 18px |
Button-group | Yes; Yes; Yes; Yes; | 0 - 20px | 4px |
Chip | Yes; Yes; Yes; Yes; | 0 - 20px | 4px |
Card | Yes; Yes; Yes; Yes; | 0 - 24px | 4px |
Carousel | Yes; Yes; Yes; Yes; | 0 - 36px | 0 |
Dialog | Yes; Yes; Yes; Yes; | 0 - 36px | 4px |
Drop-down | Yes; Yes; Yes; Yes; | 0 - 20px | 4px |
Expansion panel | Yes; Yes; Yes; Yes; | 0 - 16px | 0 |
input(Border) | Yes; Yes; Yes; Yes; | 0 - 20px | 4px |
input(Box) | Yes; Yes; No; No; | 0 - 20px | 4px 4px 0 0 |
input(Search) | Yes; Yes; Yes; Yes; | 0 - 20px | 4px |
List | Yes; Yes; Yes; Yes; | 0 - 24px | 0 |
List item | Yes; Yes; Yes; Yes; | 0 - 24px | 0 |
Navdrawer | Yes; Yes; Yes; Yes; | 0 - 36px | 0 |
Snackbar | Yes; Yes; Yes; Yes; | 0 - 24px | 4px |
Tooltip | Yes; Yes; Yes; Yes; | 0 - 16px | 4px |
Toast | Yes; Yes; Yes; Yes; | 0 - 26px | 26px |