mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
ab82d532dc
BREAKING CHANGES: renamed Sass variables in toggle, checkbox, and radio. Changed `media` in `component-mode-media-padding` (for example) to `item-left`. references #5925
76 lines
2.6 KiB
HTML
76 lines
2.6 KiB
HTML
|
|
<ion-toolbar><ion-title>Toggles</ion-title></ion-toolbar>
|
|
|
|
<ion-content>
|
|
|
|
<form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
|
|
|
|
<ion-list>
|
|
|
|
<ion-item>
|
|
Left side default icon, really long text that should ellipsis ellipsis ellipsis
|
|
<ion-icon name="information-circle" item-left></ion-icon>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Apple</ion-label>
|
|
<ion-toggle item-left value="apple"></ion-toggle>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Apple, ngControl</ion-label>
|
|
<ion-toggle ngControl="appleCtrl"></ion-toggle>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Banana, ngControl</ion-label>
|
|
<ion-toggle ngControl="bananaCtrl"></ion-toggle>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Cherry, ngControl, disabled</ion-label>
|
|
<ion-toggle disabled="true" ngControl="cherryCtrl"></ion-toggle>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Grape, ngControl, checked, disabled</ion-label>
|
|
<ion-toggle [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Kiwi, (change) Secondary color</ion-label>
|
|
<ion-toggle secondary (change)="kiwiChange($event)"></ion-toggle>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Strawberry, (change) [checked]="true"</ion-label>
|
|
<ion-toggle danger (change)="strawberryChange($event)" [checked]="true"></ion-toggle>
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
|
|
</form>
|
|
|
|
<p aria-hidden="true" text-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>kiwiValue: {{kiwiValue}}</code><br>
|
|
<code>strawberryValue: {{strawberryValue}}</code><br>
|
|
</p>
|
|
|
|
<pre aria-hidden="true" padding>{{formResults}}</pre>
|
|
|
|
</ion-content>
|