Chips

Variables

md-chip-include-remove
$md-chip-include-remove: true !default;
Sass (Scss)

Description

Boolean if the remove icon styling should be included for chips.

Type

Boolean
md-chip-include-avatar
$md-chip-include-avatar: true !default;
Sass (Scss)

Description

Boolean if the chip avatar styling should be included for chips.

Type

Boolean
md-chip-include-contact
$md-chip-include-contact: true !default;
Sass (Scss)

Description

Boolean if the chip contact styling should be included for chips.

Type

Boolean
md-chip-light-theme-color
$md-chip-light-theme-color: rgba($md-black-base, .87) !default;
Sass (Scss)

Description

A chip's text color for when using the light theme.

Type

Color

Used by

md-chip-light-theme-bg-color
$md-chip-light-theme-bg-color: $md-grey-300 !default;
Sass (Scss)

Description

A chip's background color when using the light theme.

Type

Color

Used by

md-chip-dark-theme-color
$md-chip-dark-theme-color: get-color('secondary', false) !default;
Sass (Scss)

Description

The dark theme text color of a chip. This is configurable because it is not actually specified in the docs.

Type

Color

Used by

md-chip-dark-theme-bg-color
$md-chip-dark-theme-bg-color: $md-grey-600 !default;
Sass (Scss)

Description

The dark theme background color of a chip. This is configurable because it is not actually specified in the docs.

Type

Color

Used by

md-chip-height
$md-chip-height: 32px !default;
Sass (Scss)

Description

The height for a chip.

Type

Number

Used by

md-chip-font-size
$md-chip-font-size: 13px !default;
Sass (Scss)

Description

The font size for a chip.

Type

Number

Used by

md-chip-icon-color
$md-chip-icon-color: rgba($md-black-base, .54) !default;
Sass (Scss)

Description

The remove icon color for a chip.

Type

Number

Used by

md-chip-default-padding
$md-chip-default-padding: 12px !default;
Sass (Scss)

Description

The default padding to apply to a chip. type Number

Used by

md-chip-avatar-left-padding
$md-chip-avatar-left-padding: 8px !default;
Sass (Scss)

Description

The padding between an avatar and the chip's text.

Type

Number

Used by

md-chip-icon-padding
$md-chip-icon-padding: 4px !default;
Sass (Scss)

Description

The amount of padding to use around the remove icon on a chip.

Type

Number

Used by

md-chip-icon-dense-padding
$md-chip-icon-dense-padding: 6px !default;
Sass (Scss)

Description

The amount of padding to use around the remove icon on a chip when using the dense icon spec.

Type

Number

Used by

md-chip-contact-font-size
$md-chip-contact-font-size: 14px !default;
Sass (Scss)

Description

The font size for a contact chip.

Type

Number

Used by

Mixins

react-md-chips
@mixin react-md-chips($light-theme: $md-light-theme, $include-media: $md-media-included, $include-remove: $md-chip-include-remove, $include-avatar: $md-chip-include-avatar, $include-contact: $md-chip-include-contact, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for chips. The remove, avatar, and contact styles can be excluded. If the $include-contact param is true, the avatar styles will always be included even if $include-avatar is false.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the chips should be themed for the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the media queries for chips should be included. This really relies on the include-dense-icons as well.

Boolean
$md-media-included
$include-remove

Boolean if the remove styles should be included.

Boolean
$md-chip-include-remove
$include-avatar

Boolean if the avatar styles should be included.

Boolean
$md-chip-include-avatar
$include-contact

Boolean if the contact styles should be included.

Boolean
$md-chip-include-contact
$include-dense-icons

Boolean if the dense spec for icons should be included with the remove icon.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

include react-md-chips;
Sass (Scss)

Requires

Used by

react-md-chips-avatar
@mixin react-md-chips-avatar {}
Sass (Scss)
Click to expand

Description

Includes the styles for the avatars in chips.

Parameters

None

Examples

Example Usage SCSS

@include react-md-chips-avatar;
Sass (Scss)

Requires

Used by

react-md-chips-remove
@mixin react-md-chips-remove {}
Sass (Scss)
Click to expand

Description

Includes the styles for the remove icons in chips.

Parameters

None

Examples

Example Usage SCSS

@include react-md-chips-remove;
Sass (Scss)

Requires

Used by

react-md-chips-contact
@mixin react-md-chips-contact {}
Sass (Scss)
Click to expand

Description

Includes the styles for the contact chips.

Parameters

None

Examples

Example Usage SCSS

@include react-md-chips-contact;
Sass (Scss)

Requires

Used by

react-md-theme-chips
@mixin react-md-theme-chips($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

Updates the styles for chips based on the theme. If the light-theme equals the md-light-theme, no styles will be included.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if styling for the light theme.

Boolean
$md-light-theme

Requires

Used by