Toggle
ion-toggle
ion-toggleA toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Toggles can also have colors assigned to them, by adding any color attribute.
See the Angular 2 Docs for more info on forms and inputs.
Usage
<ion-list>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-toggle [(ngModel)]="sausage" disabled="true"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-toggle [(ngModel)]="mushrooms"></ion-toggle>
</ion-item>
</ion-list>
Input Properties
| Attr | Type | Details |
|---|---|---|
| checked | boolean |
If true, the element is selected. |
| color | string |
The color to use from your Sass |
| disabled | boolean |
If true, the user cannot interact with this element. |
| mode | string |
The mode determines which platform styles to use.
Possible values are: |
Output Events
| Attr | Details |
|---|---|
| ionChange | Emitted when the toggle value changes. |
Sass Variables
| Property | Default | Description |
|---|---|---|
$toggle-ios-width |
51px |
Width of the toggle |
$toggle-ios-height |
32px |
Height of the toggle |
$toggle-ios-border-width |
2px |
Border width of the toggle |
$toggle-ios-border-radius |
$toggle-ios-height / 2 |
Border radius of the toggle |
$toggle-ios-background-color-off |
$list-ios-background-color |
Background color of the unchecked toggle |
$toggle-ios-border-color-off |
grayscale(lighten($list-ios-border-color, 11%)) |
Border color of the unchecked toggle |
$toggle-ios-background-color-on |
color($colors-ios, primary) |
Background color of the checked toggle |
$toggle-ios-handle-width |
$toggle-ios-height - ($toggle-ios-border-width * 2) |
Width of the toggle handle |
$toggle-ios-handle-height |
$toggle-ios-handle-width |
Height of the toggle handle |
$toggle-ios-handle-border-radius |
$toggle-ios-handle-height / 2 |
Border radius of the toggle handle |
$toggle-ios-handle-box-shadow |
0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) |
Box shadow of the toggle handle |
$toggle-ios-handle-background-color |
$toggle-ios-background-color-off |
Background color of the toggle handle |
$toggle-ios-media-margin |
0 |
Margin of the toggle handle |
$toggle-ios-transition-duration |
300ms |
Transition duration of the toggle icon |
$toggle-ios-disabled-opacity |
.3 |
Opacity of the disabled toggle |
$toggle-ios-item-left-padding |
6px 16px 5px 0 |
Padding of the toggle positioned on the left in an item |
$toggle-ios-item-right-padding |
6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) |
Padding of the toggle positioned on the right in an item |
| Property | Default | Description |
|---|---|---|
$toggle-md-active-color |
color($colors-md, primary) |
Color of the active toggle |
$toggle-md-track-width |
36px |
Width of the toggle track |
$toggle-md-track-height |
14px |
Height of the toggle track |
$toggle-md-track-background-color-off |
$list-md-border-color |
Background color of the toggle track |
$toggle-md-track-background-color-on |
lighten($toggle-md-active-color, 25%) |
Background color of the checked toggle track |
$toggle-md-handle-width |
20px |
Width of the toggle handle |
$toggle-md-handle-height |
20px |
Height of the toggle handle |
$toggle-md-handle-border-radius |
50% |
Border radius of the toggle handle |
$toggle-md-handle-box-shadow |
0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) |
Box shadow of the toggle handle |
$toggle-md-handle-background-color-off |
$background-md-color |
Background color of the toggle handle |
$toggle-md-handle-background-color-on |
$toggle-md-active-color |
Background color of the checked toggle handle |
$toggle-md-media-margin |
0 |
Margin of the toggle |
$toggle-md-transition-duration |
300ms |
Transition duration of the toggle icon |
$toggle-md-disabled-opacity |
.3 |
Opacity of the disabled toggle |
$toggle-md-item-left-padding |
12px 18px 12px 2px |
Padding of the toggle positioned on the left in an item |
$toggle-md-item-right-padding |
12px ($item-md-padding-right / 2) 12px $item-md-padding-left |
Padding of the toggle positioned on the right in an item |
| Property | Default | Description |
|---|---|---|
$toggle-wp-inactive-color |
#323232 |
Color of the toggle |
$toggle-wp-active-color |
color($colors-wp, primary) |
Color of the checked toggle |
$toggle-wp-track-width |
40px |
Width of the toggle track |
$toggle-wp-track-height |
18px |
Height of the toggle track |
$toggle-wp-track-background-color-off |
transparent |
Background color of the toggle track |
$toggle-wp-track-background-color-on |
$toggle-wp-active-color |
Background color of the checked toggle track |
$toggle-wp-track-border-width |
2px |
Border width of the toggle track |
$toggle-wp-track-border-color-off |
$toggle-wp-inactive-color |
Border color of the toggle track |
$toggle-wp-track-border-color-on |
$toggle-wp-active-color |
Border color of the checked toggle track |
$toggle-wp-handle-width |
10px |
Width of the toggle handle |
$toggle-wp-handle-height |
10px |
Height of the toggle handle |
$toggle-wp-handle-top |
2px |
Top of the toggle handle |
$toggle-wp-handle-left |
2px |
Left of the toggle handle |
$toggle-wp-handle-border-radius |
50% |
Border radius of the toggle handle |
$toggle-wp-handle-background-color-off |
$toggle-wp-inactive-color |
Background color of the toggle handle |
$toggle-wp-handle-background-color-on |
color-contrast($colors-wp, $toggle-wp-active-color) |
Background color of the checked toggle handle |
$toggle-wp-media-margin |
0 |
Margin of the toggle |
$toggle-wp-transition-duration |
300ms |
Transition duration of the toggle icon |
$toggle-wp-disabled-opacity |
.3 |
Opacity of the disabled toggle |
$toggle-wp-item-left-padding |
12px 18px 12px 2px |
Padding of the toggle positioned on the left in an item |
$toggle-wp-item-right-padding |
12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left |
Padding of the toggle positioned on the right in an item |