Checkbox ion-checkbox
ion-checkboxThe Checkbox is a simple component styled based on the mode. It can be placed in an ion-item or used as a stand-alone checkbox.
See the Angular Docs for more info on forms and inputs.
Usage
<ion-list> <ion-item> <ion-label>Pepperoni</ion-label> <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox> </ion-item> <ion-item> <ion-label>Sausage</ion-label> <ion-checkbox [(ngModel)]="sausage" disabled="true"></ion-checkbox> </ion-item> <ion-item> <ion-label>Mushrooms</ion-label> <ion-checkbox [(ngModel)]="mushrooms"></ion-checkbox> </ion-item> </ion-list> Input Properties
| Attr | Type | Details |
|---|---|---|
| checked | boolean | If true, the element is selected. |
Advanced
<!-- Call function when state changes --> <ion-list> <ion-item> <ion-label>Cucumber</ion-label> <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox> </ion-item> </ion-list> @Component({ templateUrl: 'main.html' }) class SaladPage { cucumber: boolean; updateCucumber() { console.log('Cucumbers new state:' + this.cucumber); } } Sass Variables
| Property | Default | Description |
|---|---|---|
$checkbox-ios-background-color-off | $list-ios-background-color | Background color of the checkbox when off |
$checkbox-ios-background-color-on | color($colors-ios, primary) | Background color of the checkbox when on |
$checkbox-ios-icon-size | 21px | Size of the checkbox icon |
$checkbox-ios-icon-border-color-off | $list-ios-border-color | Border color of the checkbox icon when off |
$checkbox-ios-icon-border-color-on | $checkbox-ios-background-color-on | Border color of the checkbox icon when on |
$checkbox-ios-icon-border-width | 1px | Border width of the checkbox icon |
$checkbox-ios-icon-border-style | solid | Border style of the checkbox icon |
$checkbox-ios-icon-border-radius | 50% | Border radius of the checkbox icon |
$checkbox-ios-icon-checkmark-width | 1px | Width of the checkbox icon checkmark |
$checkbox-ios-icon-checkmark-style | solid | Style of the checkbox icon checkmark |
$checkbox-ios-icon-checkmark-color | color-contrast($colors-ios, $checkbox-ios-background-color-on) | Color of the checkbox icon checkmark |
$checkbox-ios-disabled-opacity | .3 | Opacity of the disabled checkbox |
$checkbox-ios-item-start-margin-top | $item-ios-padding-media-top | Margin top of the left checkbox item |
$checkbox-ios-item-start-margin-end | $item-ios-padding-end | Margin end of the left checkbox item |
$checkbox-ios-item-start-margin-bottom | $item-ios-padding-media-bottom | Margin bottom of the left checkbox item |
$checkbox-ios-item-start-margin-start | 2px | Margin start of the left checkbox item |
$checkbox-ios-item-end-margin-top | 10px | Margin top of the right checkbox item |
$checkbox-ios-item-end-margin-end | 8px | Margin end of the right checkbox item |
$checkbox-ios-item-end-margin-bottom | 9px | Margin bottom of the right checkbox item |
$checkbox-ios-item-end-margin-start | 0 | Margin start of the right checkbox item |
| Property | Default | Description |
|---|---|---|
$checkbox-md-border-bottom-width | 1px | Border bottom width of the checkbox |
$checkbox-md-border-bottom-style | solid | Border bottom style of the checkbox |
$checkbox-md-border-bottom-color | $list-md-border-color | Border bottom color of the checkbox |
$checkbox-md-disabled-opacity | .3 | Opacity of the disabled checkbox |
$checkbox-md-icon-background-color-off | $list-md-background-color | Background color of the checkbox icon when off |
$checkbox-md-icon-background-color-on | color($colors-md, primary) | Background color of the checkbox icon when on |
$checkbox-md-icon-size | 16px | Size of the checkbox icon |
$checkbox-md-icon-checkmark-width | 2px | Width of the checkbox icon checkmark |
$checkbox-md-icon-checkmark-style | solid | Style of the checkbox icon checkmark |
$checkbox-md-icon-checkmark-color | color-contrast($colors-md, $checkbox-md-icon-background-color-on) | Color of the checkbox icon checkmark |
$checkbox-md-icon-border-width | 2px | Border width of the checkbox icon |
$checkbox-md-icon-border-style | solid | Border style of the checkbox icon |
$checkbox-md-icon-border-radius | 2px | Border radius of the checkbox icon |
$checkbox-md-icon-border-color-off | darken($list-md-border-color, 40%) | Border color of the checkbox icon when off |
$checkbox-md-icon-border-color-on | color($colors-md, primary) | Border color of the checkbox icon when on |
$checkbox-md-transition-duration | 280ms | Transition duration of the checkbox |
$checkbox-md-transition-easing | cubic-bezier(.4, 0, .2, 1) | Transition easing of the checkbox |
$checkbox-md-item-start-margin-top | $item-md-padding-media-top | Margin top of the start checkbox item |
$checkbox-md-item-start-margin-end | 36px | Margin end of the start checkbox item |
$checkbox-md-item-start-margin-bottom | $item-md-padding-media-bottom | Margin bottom of the start checkbox item |
$checkbox-md-item-start-margin-start | 4px | Margin start of the start checkbox item |
$checkbox-md-item-end-margin-top | 11px | Margin top of the end checkbox item |
$checkbox-md-item-end-margin-end | 10px | Margin end of the end checkbox item |
$checkbox-md-item-end-margin-bottom | 10px | Margin bottom of the end checkbox item |
$checkbox-md-item-end-margin-start | 0 | Margin start of the end checkbox item |
| Property | Default | Description |
|---|---|---|
$checkbox-wp-border-bottom-width | 1px | Border bottom width of the checkbox |
$checkbox-wp-border-bottom-style | solid | Border bottom style of the checkbox |
$checkbox-wp-border-bottom-color | $list-wp-border-color | Border bottom color of the checkbox |
$checkbox-wp-disabled-opacity | .3 | Opacity of the disabled checkbox |
$checkbox-wp-icon-background-color-off | $list-wp-background-color | Background color of the checkbox icon when off |
$checkbox-wp-icon-background-color-on | color($colors-wp, primary) | Background color of the checkbox icon when on |
$checkbox-wp-icon-size | 16px | Size of the checkbox icon |
$checkbox-wp-icon-checkmark-width | 1px | Width of the checkbox icon checkmark |
$checkbox-wp-icon-checkmark-style | solid | Style of the checkbox icon checkmark |
$checkbox-wp-icon-checkmark-color | color-contrast($colors-wp, $checkbox-wp-icon-background-color-on) | Color of the checkbox icon checkmark |
$checkbox-wp-icon-border-width | 2px | Border width of the checkbox icon |
$checkbox-wp-icon-border-style | solid | Border style of the checkbox icon |
$checkbox-wp-icon-border-radius | 0 | Border radius of the checkbox icon |
$checkbox-wp-icon-border-color-off | #333 | Border color of the checkbox icon when off |
$checkbox-wp-icon-border-color-on | color($colors-wp, primary) | Border color of the checkbox icon when on |
$checkbox-wp-item-start-margin-top | $item-wp-padding-media-top | Margin top of the start checkbox item |
$checkbox-wp-item-start-margin-end | $item-wp-padding-end | Margin end of the start checkbox item |
$checkbox-wp-item-start-margin-bottom | $item-wp-padding-media-bottom | Margin bottom of the start checkbox item |
$checkbox-wp-item-start-margin-start | 4px | Margin start of the start checkbox item |
$checkbox-wp-item-end-margin-top | 11px | Margin top of the end checkbox item |
$checkbox-wp-item-end-margin-end | 10px | Margin end of the end checkbox item |
$checkbox-wp-item-end-margin-bottom | 10px | Margin bottom of the end checkbox item |
$checkbox-wp-item-end-margin-start | 0 | Margin start of the end checkbox item |