mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
938864e8d0
BREAKING CHANGES: - `<button>` becomes `<button ion-button>` - `<a button>` becomes `<a ion-button>` - `<button ion-item>` does not get the `ion-button` attribute - Buttons inside of `<ion-item-options>` do get the `ion-button` attribute - Removed the `category` attribute, this should be passed in `ion-button` instead. - Button attributes added for icons in buttons: `icon-only`, `icon-left`, and `icon-right` closes #7466
92 lines
3.2 KiB
HTML
92 lines
3.2 KiB
HTML
<ion-header>
|
|
|
|
<ion-toolbar>
|
|
<ion-title>Checkboxes</ion-title>
|
|
</ion-toolbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
|
|
<form (submit)="doSubmit($event)" [formGroup]="fruitsForm">
|
|
|
|
<ion-list>
|
|
|
|
<ion-item>
|
|
<ion-label>Apple, formControlName</ion-label>
|
|
<ion-checkbox formControlName="appleCtrl"></ion-checkbox>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Banana, formControlName</ion-label>
|
|
<ion-checkbox formControlName="bananaCtrl"></ion-checkbox>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Cherry, formControlName, disabled</ion-label>
|
|
<ion-checkbox disabled="true" formControlName="cherryCtrl"></ion-checkbox>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Grape, formControlName, checked, disabled</ion-label>
|
|
<ion-checkbox [checked]="grapeChecked" [disabled]="grapeDisabled" formControlName="grapeCtrl"></ion-checkbox>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
|
|
<ion-checkbox secondary (ionChange)="kiwiChange($event)"></ion-checkbox>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Strawberry, (ionChange) [checked]="true"</ion-label>
|
|
<ion-checkbox light (ionChange)="strawberryChange($event)" [checked]="true"></ion-checkbox>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
|
|
<ion-checkbox item-right danger checked></ion-checkbox>
|
|
</ion-item>
|
|
|
|
<button ion-item detail-none>
|
|
<ion-label>Checkbox right side</ion-label>
|
|
<ion-checkbox item-right checked></ion-checkbox>
|
|
</button>
|
|
|
|
<button ion-item detail-none>
|
|
Button w/ right side default icon, really long text that should ellipsis
|
|
<ion-icon name="information-circle" item-right></ion-icon>
|
|
</button>
|
|
|
|
</ion-list>
|
|
|
|
</form>
|
|
|
|
<p aria-hidden="true" text-center>
|
|
<button ion-button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
|
|
<button ion-button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
|
|
<button ion-button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
|
|
</p>
|
|
|
|
<p>
|
|
<ion-checkbox [(ngModel)]="standAloneChecked"></ion-checkbox>
|
|
Stand-alone checkbox: {{standAloneChecked}}
|
|
</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>
|