mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(select): ion-select using alert radio/checkbox options
Closes #890 Closes #826 Closes #886
This commit is contained in:
1
ionic/components/select/test/multiple-value/e2e.ts
Normal file
1
ionic/components/select/test/multiple-value/e2e.ts
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
17
ionic/components/select/test/multiple-value/index.ts
Normal file
17
ionic/components/select/test/multiple-value/index.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import {App, Page} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Page({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EPage {}
|
||||
|
||||
|
||||
@App({
|
||||
template: '<ion-nav [root]="root"></ion-nav>'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor() {
|
||||
this.root = E2EPage;
|
||||
}
|
||||
}
|
||||
34
ionic/components/select/test/multiple-value/main.html
Normal file
34
ionic/components/select/test/multiple-value/main.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<ion-toolbar><ion-title>Select Item: Multiple Value</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-select [(ngModel)]="topings" multiple="true">
|
||||
<ion-label>Topings</ion-label>
|
||||
<ion-option value="bacon">Bacon</ion-option>
|
||||
<ion-option value="olives">Black Olives</ion-option>
|
||||
<ion-option value="xcheese">Extra Cheese</ion-option>
|
||||
<ion-option value="peppers">Green Peppers</ion-option>
|
||||
<ion-option value="mushrooms">Mushrooms</ion-option>
|
||||
<ion-option value="onions">Onions</ion-option>
|
||||
<ion-option value="pepperoni">Pepperoni</ion-option>
|
||||
<ion-option value="pineapple">Pineapple</ion-option>
|
||||
<ion-option value="Sausage">Sausage</ion-option>
|
||||
<ion-option value="Spinach">Spinach</ion-option>
|
||||
</ion-select>
|
||||
|
||||
<ion-select [(ngModel)]="carOptions" multiple="true">
|
||||
<ion-label>Car Options</ion-label>
|
||||
<ion-option value="backupcamera">Backup Camera</ion-option>
|
||||
<ion-option value="heatedseats">Headted Seats</ion-option>
|
||||
<ion-option value="keyless">Keyless Entry</ion-option>
|
||||
<ion-option value="navigation">Navigation</ion-option>
|
||||
<ion-option value="parkingassist">Parking Assist</ion-option>
|
||||
<ion-option value="sunroof">Sun Roof</ion-option>
|
||||
</ion-select>
|
||||
|
||||
<p aria-hidden="true" padding>
|
||||
<code>topings: {{topings}}</code><br>
|
||||
<code>carOptions: {{carOptions}}</code><br>
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
1
ionic/components/select/test/single-value/e2e.ts
Normal file
1
ionic/components/select/test/single-value/e2e.ts
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
17
ionic/components/select/test/single-value/index.ts
Normal file
17
ionic/components/select/test/single-value/index.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import {App, Page} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Page({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EPage {}
|
||||
|
||||
|
||||
@App({
|
||||
template: '<ion-nav [root]="root"></ion-nav>'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor() {
|
||||
this.root = E2EPage;
|
||||
}
|
||||
}
|
||||
52
ionic/components/select/test/single-value/main.html
Normal file
52
ionic/components/select/test/single-value/main.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<ion-toolbar><ion-title>Select Item: Single Value</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-select [(ngModel)]="gender">
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-option value="f" checked="true">Female</ion-option>
|
||||
<ion-option value="m">Male</ion-option>
|
||||
</ion-select>
|
||||
|
||||
<ion-select [(ngModel)]="gaming">
|
||||
<ion-label>Gaming</ion-label>
|
||||
<ion-option value="nes">NES</ion-option>
|
||||
<ion-option value="n64">Nintendo64</ion-option>
|
||||
<ion-option value="ps">PlayStation</ion-option>
|
||||
<ion-option value="genesis">Sega Genesis</ion-option>
|
||||
<ion-option value="saturn">Sega Saturn</ion-option>
|
||||
<ion-option value="snes">SNES</ion-option>
|
||||
</ion-select>
|
||||
|
||||
<ion-select [(ngModel)]="os" submitText="Okay" cancelText="Nah">
|
||||
<ion-label>Operating System</ion-label>
|
||||
<ion-option value="dos">DOS</ion-option>
|
||||
<ion-option value="lunix">Linux</ion-option>
|
||||
<ion-option value="mac7">Mac OS 7</ion-option>
|
||||
<ion-option value="mac8">Mac OS 8</ion-option>
|
||||
<ion-option value="win3.1" checked>Windows 3.1</ion-option>
|
||||
<ion-option value="win95">Windows 95</ion-option>
|
||||
<ion-option value="win98">Windows 98</ion-option>
|
||||
</ion-select>
|
||||
|
||||
<ion-select [(ngModel)]="music">
|
||||
<ion-label>Music</ion-label>
|
||||
<ion-option value="aliceinchains">Alice in Chains</ion-option>
|
||||
<ion-option value="greenday">Green Day</ion-option>
|
||||
<ion-option value="hole">Hole</ion-option>
|
||||
<ion-option value="korn">Korn</ion-option>
|
||||
<ion-option value="nirvana">Nirvana</ion-option>
|
||||
<ion-option value="pearljam">Pearl Jam</ion-option>
|
||||
<ion-option value="smashingpumpkins">Smashing Pumpkins</ion-option>
|
||||
<ion-option value="soundgarden">Soundgarden</ion-option>
|
||||
<ion-option value="stp">Stone Temple Pilots</ion-option>
|
||||
</ion-select>
|
||||
|
||||
<p aria-hidden="true" padding>
|
||||
<code>gender: {{gender}}</code><br>
|
||||
<code>gaming: {{gaming}}</code><br>
|
||||
<code>os: {{os}}</code><br>
|
||||
<code>music: {{music}}</code><br>
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
Reference in New Issue
Block a user