mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
60 lines
2.0 KiB
HTML
60 lines
2.0 KiB
HTML
|
|
<ion-toolbar><ion-title>Toggles</ion-title></ion-toolbar>
|
|
|
|
|
|
<ion-content>
|
|
|
|
<form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
|
|
|
|
<ion-list>
|
|
|
|
<ion-toggle value="apple" checked="true" ng-control="appleCtrl">
|
|
Apple, value=apple, init checked
|
|
</ion-toggle>
|
|
|
|
<ion-toggle ng-control="bananaCtrl">
|
|
Banana, init no checked/value attributes
|
|
</ion-toggle>
|
|
|
|
<ion-toggle value="cherry" disabled="true" ng-control="cherryCtrl">
|
|
Cherry, value=cherry, init disabled
|
|
</ion-toggle>
|
|
|
|
<ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
|
|
Grape, value=grape, init checked, disabled
|
|
</ion-toggle>
|
|
|
|
<ion-toggle secondary checked="true">
|
|
Secondary color
|
|
</ion-toggle>
|
|
|
|
<ion-toggle value="apple" checked="true" [(ng-model)]="myModel">
|
|
I'm an NgModel
|
|
</ion-toggle>
|
|
|
|
</ion-list>
|
|
|
|
</form>
|
|
|
|
<p aria-hidden="true" class="align-center">
|
|
<button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
|
|
<button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
|
|
<button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
|
|
</p>
|
|
|
|
<p aria-hidden="true" padding>
|
|
<code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
|
|
<code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
|
|
<code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
|
|
<code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}</code><br>
|
|
<code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
|
|
<code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
|
|
<code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
|
|
<code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
|
|
<code>ngModel.value: {{myModel}}</code><br>
|
|
</p>
|
|
|
|
<pre aria-hidden="true" padding>{{formResults}}</pre>
|
|
|
|
</ion-content>
|