mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
117 lines
2.9 KiB
HTML
117 lines
2.9 KiB
HTML
|
||
<ion-toolbar>
|
||
<ion-title>Radio Group</ion-title>
|
||
</ion-toolbar>
|
||
|
||
|
||
<ion-content>
|
||
|
||
<form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
|
||
|
||
<ion-list radio-group ngControl="fruits">
|
||
|
||
<ion-list-header>
|
||
Fruits
|
||
</ion-list-header>
|
||
|
||
<ion-item>
|
||
<ion-label>Apple</ion-label>
|
||
<ion-radio value="apple" checked="true"></ion-radio>
|
||
</ion-item>
|
||
|
||
<ion-item>
|
||
<ion-label>Banana</ion-label>
|
||
<ion-radio value="banana"></ion-radio>
|
||
</ion-item>
|
||
|
||
<ion-item>
|
||
<ion-label>Cherry (secondary color)</ion-label>
|
||
<ion-radio value="cherry" secondary></ion-radio>
|
||
</ion-item>
|
||
|
||
<ion-item>
|
||
<ion-label>Disabled</ion-label>
|
||
<ion-radio value="disabled" disabled="true"></ion-radio>
|
||
</ion-item>
|
||
|
||
</ion-list>
|
||
|
||
</form>
|
||
|
||
<div aria-hidden="true" text-center>
|
||
<button (click)="setApple()" outline small>Select Apple</button>
|
||
<button (click)="setBanana()" outline small>Select Banana</button>
|
||
<button class="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>
|
||
</div>
|
||
|
||
<div padding>
|
||
<code><b>fruits.dirty:</b> {{fruitsForm.controls.fruits.dirty}}</code><br>
|
||
<code><b>fruits.value:</b> {{fruitsForm.controls.fruits.value}}</code><br>
|
||
</div>
|
||
|
||
<form (submit)="doSubmit($event)" [ngFormModel]="currencyForm">
|
||
<ion-list radio-group ngControl="currenciesControl">
|
||
<ion-list-header id="currencies">
|
||
Currencies
|
||
</ion-list-header>
|
||
<ion-item *ngFor="#currency of currencies">
|
||
<ion-label>{{currency}}</ion-label>
|
||
<ion-radio [checked]="currency==selectedCurrency" [value]="currency"></ion-radio>
|
||
</ion-item>
|
||
</ion-list>
|
||
</form>
|
||
|
||
<div padding>
|
||
<code><b>currenciesControl.value:</b> {{currencyForm.controls.currenciesControl.value}}</code>
|
||
</div>
|
||
|
||
<ion-list radio-group [(ngModel)]="relationship">
|
||
<ion-item>
|
||
<ion-label>Friends</ion-label>
|
||
<ion-radio value="friends"></ion-radio>
|
||
</ion-item>
|
||
<ion-item>
|
||
<ion-label>Enemies</ion-label>
|
||
<ion-radio value="enemies"></ion-radio>
|
||
</ion-item>
|
||
</ion-list>
|
||
|
||
<div padding>
|
||
<code><b>relationship:</b> {{relationship}}</code>
|
||
</div>
|
||
|
||
<div radio-group [(ngModel)]="pet" (change)="petChange($event)">
|
||
<p>
|
||
<ion-radio checked (select)="dogSelect($event)"></ion-radio>
|
||
Dogs
|
||
</p>
|
||
<p>
|
||
<ion-radio (select)="catSelect($event)"></ion-radio>
|
||
Cats
|
||
</p>
|
||
<p>
|
||
<ion-radio (select)="turtleSelect($event)"></ion-radio>
|
||
Turtles
|
||
</p>
|
||
</div>
|
||
|
||
<div padding>
|
||
<code><b>pet:</b> {{pet}}</code>
|
||
</div>
|
||
|
||
<ion-list radio-group [(ngModel)]="someNumber">
|
||
<ion-item *ngFor="#item of items">
|
||
<ion-label>
|
||
{{ item.description }}
|
||
</ion-label>
|
||
|
||
<ion-radio [value]="item.value"></ion-radio>
|
||
</ion-item>
|
||
</ion-list>
|
||
|
||
<div padding>
|
||
<code><b>someNumber:</b> {{someNumber}}</code>
|
||
</div>
|
||
|
||
</ion-content>
|