Ignite UI for Angular
Components Get Started

utilities

#

function dynamic-shade public view code open_in_new

Calculates a dynamic shade of a color by adjusting its lightness in LCH color space.

Parameters
Name Type Default Description
$color *
Color
- The base color to shade.
$lightness
Number
50 The target lightness value to move toward.
$percentage
Number
0.1 The percentage to move toward the target lightness.
$offset
Number
10 The offset added or subtracted based on direction.
#

function progress-circular-theme public view code open_in_new

Example

Change the circle progress color

$my-progress-circular-theme: progress-circular-theme(
  $fill-color-default: purple
);
// Pass the theme to the igx-progress-circular component mixin
@include igx-progress-circular($my-progress-circle-theme);
Parameters
Name Type Default Description
$schema
Map
$light-material-schema The schema used as basis for styling the component.
$base-circle-color
Color
null The base circle fill color.
$fill-color-default
Color | List<Color>
null The progress circle fill color.
$fill-color-danger
Color
null The track danger fill color.
$fill-color-warning
Color
null The track warning fill color.
$fill-color-info
Color
null The track info fill color.
$fill-color-success
Color
null The track success fill color.
$text-color
Color
null The value text color.
$diameter
Number
null The progress circle diameter.
Requires
#

function pad public view code open_in_new

Returns a value based on the size of the component taking spacing values into consideration. The passed sizes are converted to absolute values before comparing.

Example
.my-component {
  padding: pad(4px, 8px, 16px);
}
Parameters
Name Type Default Description
$sm *
Number
- The preferred value when the component's size is small.
$md
Number
$sm The preferred value when the component's size is medium.
$lg
Number
$md The preferred value when the component's size is large.
$dir
Number
null The preferred direction - inline or block.
#

function pad-inline public view code open_in_new

Used to add inline spacing.

Example
.my-component {
  padding: pad-inline(4px, 8px, 16px);
}
Parameters
Name Type Default Description
$sm *
Number
- The preferred value when the component's size is small.
$md
Number
$sm The preferred value when the component's size is medium.
$lg
Number
$md The preferred value when the component's size is large.
#

function pad-block public view code open_in_new

Used to add block spacing.

Example
.my-component {
  padding: pad-block(4px, 8px, 16px);
}
Parameters
Name Type Default Description
$sm *
Number
- The preferred value when the component's size is small.
$md
Number
$sm The preferred value when the component's size is medium.
$lg
Number
$md The preferred value when the component's size is large.
#

function clean public view code open_in_new

Removes all null key-value pairs from a map

Parameters
Name Type Default Description
$map *
Map
- The target map to be cleaned.
#

function extend public view code open_in_new

Extends a Map with the values of another Map, disregarding null values in the process.

Parameters
Name Type Default Description
$maps *
Map...
- The maps to get extended.
Requires
#

function diff public view code open_in_new

Extracts the differences between two or more maps, comparing the first map against the rest.

Example

Pull out the unique properties of the second map when compared to the first.

$map-1: (
  color: orange,
  background: black,
);


$map-2: (
  color: red,
  background: black,
);


$diffed: diff($map-1, $map-2); // returns (color: red);
Parameters
Name Type Default Description
$maps *
Map...
- A list of maps that will be diffed.
#

function to-fixed public view code open_in_new

Rounds a number to a certain precision

Parameters
Name Type Default Description
$number *
Number
- The number to be rounded
$precision
Number
2 Specifies the number of the digits after the decimal separator
#

function to-string public view code open_in_new

Converts a number to a string.

Parameters
Name Type Default Description
$num *
number
- The number to convert.
$radix
radix
16 The base radix to use for the conversion.
#

function is-root public view code open_in_new

Returns true if the scope where it's called is the root of the document.

Example

Check if the current scope is root

@mixin smart-mixin() {
  $scope: if(is-root(), ':root', '&');


  #{$scope} {
    /* style rules here */
  }
}
#

function is-host public view code open_in_new

Returns true if the scope where it's called is :host.

Example

Check if the current scope is :root

@mixin smart-mixin() {
  $host: is-host();


  @if is-host() {
    /* style rules here */
  }
}
#

function split public view code open_in_new

Splits a string into a list by a given separator.

Parameters
Name Type Default Description
$string *
String
- The string to split.
$separator *
String
- The string separator to split the string by.
#

function replace public view code open_in_new

Returns a new string with one, some, or all matches of a string replaced by a replacement.

Parameters
Name Type Default Description
$string *
String
- The target string.
$search *
String
- The term to search form.
$replace *
String
- The string to replace the search term with.
#

mixin button public view code open_in_new

warning Deprecated

Use the `css-vars` mixin instead.

Parameters
Name Type Default Description
$flat
Map
null The flat theme used to style the component.
$contained
Map
null The contained theme used to style the component.
$outlined
Map
null The outlined theme used to style the component.
$fab
Map
null The fab theme used to style the component.
See
#

mixin card public view code open_in_new

Card Component

warning Deprecated

Use the `css-vars` mixin instead.

Parameters
Name Type Default Description
$theme *
Map
- The theme used to style the component.
See
#

mixin toast public view code open_in_new

Toast Component

warning Deprecated

Use the `css-vars` mixin instead.

Parameters
Name Type Default Description
$theme *
Map
- The theme used to style the component.
See
#

mixin color-classes public view code open_in_new

Generates CSS class names for all colors from for a given property and color palette, with optional prefix and suffix attached to the class name.

Example

Generate background classes with colors from the palette.

// Will generate class names like
// .igx-primary-500-bg { ... };
@include color-classes(
  $prop: 'background-color',
  $suffix: 'bg'
);
Parameters
Name Type Default Description
$prop *
string
- The CSS property to assign the palette color to.
$prefix
string
igx A prefix to be attached to the class name.
$suffix
string
null A suffix to be attached to the class name.
$palette
Map
$default-palette The igx palette to use to generate css class names for.
Requires
#

mixin line-clamp public view code open_in_new

Truncates text to a specific number of lines.

Example

Truncates text after the fourth line

@include line-clamp(4, true, true);
Parameters
Name Type Default Description
$lines *
number|string
- The number of lines to show
$inline *
Boolean
- Sets whether an element displays inline-box or box
$vertical *
Boolean
- Sets whether an element lays out its contents horizontally or vertically
#

mixin ellipsis public view code open_in_new

Applies text-overflow ellipsis to e text element. This won't work on display flex elements.

Example
.my-class {
  @include ellipsis();
}
#

mixin hide-default public view code open_in_new

Hides the element from the DOM.

Example

Sample usage

input[type="checkbox"] {
  @include hide-default();
}

Search Documentation