mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
142 lines
3.6 KiB
HTML
142 lines
3.6 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>
|
||
Button w/ left side default icon, really long text that should ellipsis
|
||
<ion-icon name="information-circle" item-left></ion-icon>
|
||
</ion-item>
|
||
|
||
<ion-item>
|
||
<ion-label>Apple</ion-label>
|
||
<ion-radio item-left value="apple"></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-item>
|
||
<ion-label>Radio right side</ion-label>
|
||
<ion-radio item-right checked></ion-radio>
|
||
</ion-item>
|
||
|
||
<ion-item>
|
||
Button w/ right side default icon, really long text that should ellipsis
|
||
<ion-icon name="information-circle" item-right></ion-icon>
|
||
</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="let currency of currencies">
|
||
<ion-label>{{currency}}</ion-label>
|
||
<ion-radio [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 (change)="petChange($event)">
|
||
<p>
|
||
<ion-radio (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>
|
||
|
||
<ion-list radio-group [(ngModel)]="someValue">
|
||
<ion-item *ngFor="let item of items">
|
||
<ion-label>
|
||
{{ item.description }}
|
||
</ion-label>
|
||
|
||
<ion-radio [value]="item.value"></ion-radio>
|
||
</ion-item>
|
||
</ion-list>
|
||
|
||
<div padding>
|
||
<code><b>someValue:</b> {{someValue}}</code>
|
||
</div>
|
||
|
||
<ion-list radio-group [(ngModel)]="selectedTime">
|
||
<ion-list-header>
|
||
Time
|
||
</ion-list-header>
|
||
<ion-item>
|
||
<ion-label>60 minutes</ion-label>
|
||
<ion-radio value="60"></ion-radio>
|
||
</ion-item>
|
||
<ion-item>
|
||
<ion-label>30 minutes</ion-label>
|
||
<ion-radio value="30"></ion-radio>
|
||
</ion-item>
|
||
</ion-list>
|
||
|
||
</ion-content>
|