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 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. |
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-start-padding-top | 6px | Padding top of the toggle positioned on the start in an item |
$toggle-ios-item-start-padding-end | 16px | Padding end of the toggle positioned on the start in an item |
$toggle-ios-item-start-padding-bottom | 5px | Padding bottom of the toggle positioned on the start in an item |
$toggle-ios-item-start-padding-start | 0 | Padding start of the toggle positioned on the start in an item |
$toggle-ios-item-end-padding-top | 6px | Padding top of the toggle positioned on the end in an item |
$toggle-ios-item-end-padding-end | ($item-ios-padding-end / 2) | Padding end of the toggle positioned on the end in an item |
$toggle-ios-item-end-padding-bottom | 5px | Padding bottom of the toggle positioned on the end in an item |
$toggle-ios-item-end-padding-start | $item-ios-padding-start | Padding start of the toggle positioned on the end 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-top | 0 | Margin top of the toggle |
$toggle-md-media-margin-end | $toggle-md-media-margin-top | Margin end of the toggle |
$toggle-md-media-margin-bottom | $toggle-md-media-margin-top | Margin bottom of the toggle |
$toggle-md-media-margin-start | $toggle-md-media-margin-end | Margin start 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-padding-top | 12px | Padding top of standalone toggle |
$toggle-md-padding-end | $toggle-md-padding-top | Padding end of standalone toggle |
$toggle-md-padding-bottom | $toggle-md-padding-top | Padding bottom of standalone toggle |
$toggle-md-padding-start | $toggle-md-padding-end | Padding start of standalone toggle |
$toggle-md-item-start-padding-top | 12px | Padding top of the toggle positioned on the start in an item |
$toggle-md-item-start-padding-end | 18px | Padding end of the toggle positioned on the start in an item |
$toggle-md-item-start-padding-bottom | 12px | Padding bottom of the toggle positioned on the start in an item |
$toggle-md-item-start-padding-start | 2px | Padding start the toggle positioned on the start in an item |
$toggle-md-item-end-padding-top | 12px | Padding top of the toggle positioned on the end in an item |
$toggle-md-item-end-padding-end | ($item-md-padding-end / 2) | Padding end of the toggle positioned on the end in an item |
$toggle-md-item-end-padding-bottom | 12px | Padding bottom of the toggle positioned on the end in an item |
$toggle-md-item-end-padding-start | $item-md-padding-start | Padding start of the toggle positioned on the end 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-start-padding-top | 12px | Padding top of the toggle positioned on the start in an item |
$toggle-wp-item-start-padding-end | 18px | Padding end of the toggle positioned on the start in an item |
$toggle-wp-item-start-padding-bottom | 12px | Padding bottom of the toggle positioned on the start in an item |
$toggle-wp-item-start-padding-start | 2px | Padding start the toggle positioned on the start in an item |
$toggle-wp-item-end-padding-top | 12px | Padding top of the toggle positioned on the end in an item |
$toggle-wp-item-end-padding-end | ($item-wp-padding-end / 2) | Padding end of the toggle positioned on the end in an item |
$toggle-wp-item-end-padding-bottom | 12px | Padding bottom of the toggle positioned on the end in an item |
$toggle-wp-item-end-padding-start | $item-wp-padding-start | Padding start of the toggle positioned on the end in an item |