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
    Our community is active and always welcoming to new ideas.