Permalink
abcc6af Aug 19, 2016
66 lines (55 sloc) 1.72 KB

MdSlideToggle

MdSlideToggle is a two-state control, which can be also called switch

Screenshots

image

<md-slide-toggle>

Bound Properties

Name Type Description
disabled boolean Disables the slide-toggle
color "primary" | "accent" | "warn" The color palette of the slide-toggle
checked boolean Sets the value of the slide-toggle

Events

Name Type Description
change boolean Event will be emitted on every value change.
It emits the new checked value.

Examples

A basic slide-toggle would have the following markup.

<md-slide-toggle [(ngModel)]="slideToggleModel">
  Default Slide Toggle
</md-slide-toggle>

Slide toggle can be also disabled.

<md-slide-toggle disabled>
  Disabled Slide Toggle
</md-slide-toggle>

The slide-toggle can be also set to checked without a ngModel

<md-slide-toggle [checked]="isChecked">
  Input Binding
</md-slide-toggle>

You may also want to listen on changes of the slide-toggle
The slide-toggle always emits the new value to the event binding (change)

<md-slide-toggle (change)="printValue($event)">
  Prints Value on Change
</md-slide-toggle>

Theming

A slide-toggle is default using the accent palette for its styling.

Modifying the color on a slide-toggle can be easily done, by using the following markup.

<md-slide-toggle color="primary">
  Primary Slide Toggle
</md-slide-toggle>

The color can be also set dynamically by using a property binding.

<md-slide-toggle [color]="myColor">
  Dynamic Color
</md-slide-toggle>