Autocompletes

Variables

md-inline-autocomplete
$md-inline-autocomplete: true !default;
Sass (Scss)

Description

Boolean if the inline autocompletes should be included by default.

Type

Boolean
md-autocomplete-suggestion-top
$md-autocomplete-suggestion-top: 12px !default;
Sass (Scss)

Description

The position from the top of the text field that the inline autocomplete suggestion should appear.

Type

Number

Used by

md-autocomplete-suggestion-mobile-floating-top
$md-autocomplete-suggestion-mobile-floating-top: $md-text-field-mobile-floating-label-margin !default;
Sass (Scss)

Description

The position from the top of the text field with a floating label that the inline autocomplete suggestion should appear on mobile devices.

Type

Number

Used by

md-autocomplete-suggestion-mobile-block-top
$md-autocomplete-suggestion-mobile-block-top: 18px !default;
Sass (Scss)

Description

The position from the top of a blocked text field that the inline autocomplete suggestion should appear on mobile devices.

Type

Number

Used by

md-autocomplete-suggestion-desktop-floating-top
$md-autocomplete-suggestion-desktop-floating-top: $md-text-field-desktop-floating-label-margin !default;
Sass (Scss)

Description

The position from the top of the text field with a floating label that the inline autocomplete suggestion should appear.

Type

Number

Used by

md-autocomplete-suggestion-desktop-block-top
$md-autocomplete-suggestion-desktop-block-top: 15px !default;
Sass (Scss)

Description

The position from the top of a blocked text field that the inline autocomplete suggestion should appear on desktop screens.

Type

Number

Used by

Mixins

react-md-autocompletes
@mixin react-md-autocompletes($light-theme: $md-light-theme, $include-inline: $md-inline-autocomplete) {}
Sass (Scss)
Click to expand

Description

Includes any additional styles for autocompletes if include-inline is true. The Autocomplete component really depends on all the styles for text fields and menus.

This will end up creating the .md-autocomplete-suggestion class name that is used for the inline suggestions for autocompletes.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean
$md-inline-autocomplete

Requires

Used by

See

react-md-autocompletes-mobile
@mixin react-md-autocompletes-mobile($include-inline: $md-inline-autocomplete) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the autocomplete component on mobile devices. This should normally be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean
$md-inline-autocomplete

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-autocompletes-mobile;
}
Sass (Scss)

Requires

Used by

react-md-autocompletes-desktop
@mixin react-md-autocompletes-desktop($include-inline: $md-inline-autocomplete) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the autocomplete component on desktop screens. This should normally be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean
$md-inline-autocomplete

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-autocompletes-desktop;
}
Sass (Scss)

Requires

Used by

react-md-autocompletes-media
@mixin react-md-autocompletes-media($include-inline: $md-inline-autocomplete) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for autocompletes.

Parameters

NameDescriptionTypeDefault value
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean
$md-inline-autocomplete

Examples

Example Usage SCSS

@include react-md-autocompletes-media;
Sass (Scss)

Requires

Used by

react-md-theme-autocompletes
@mixin react-md-theme-autocompletes($light-theme: $md-light-theme, $include-inline: $md-inline-autocomplete) {}
Sass (Scss)
Click to expand

Description

Updates the styles for the autocompletes ONLY if the $light-theme does not equal the $md-light-theme.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean
$md-inline-autocomplete

Requires