Skip to content

Commit 9a4b6bb

Browse files
brandyscarneybrandyscarney
committed
docs(demos): add demo for select
references ionic-team/ionic-site#397
1 parent 7086698 commit 9a4b6bb

File tree

3 files changed

+167
-1
lines changed

3 files changed

+167
-1
lines changed

‎demos/select/index.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {App, Page} from 'ionic/ionic';
2+
3+
@App({
4+
template: '<ion-nav [root]="root"></ion-nav>'
5+
})
6+
class ApiDemoApp {
7+
constructor() {
8+
this.root = MainPage;
9+
}
10+
}
11+
12+
@Page({
13+
templateUrl: 'main.html'
14+
})
15+
class MainPage {
16+
constructor() {
17+
this.musicAlertOpts = {
18+
title: '1994 Music',
19+
subTitle: 'Select your favorite'
20+
};
21+
22+
this.petOptions = [
23+
{ text: 'Bird', value: 'bird' },
24+
{ text: 'Cat', value: 'cat', checked: true },
25+
{ text: 'Dog', value: 'dog', checked: true },
26+
{ text: 'Honey Badger', value: 'honeybadger' },
27+
{ text: 'Pig', value: 'pig' },
28+
];
29+
}
30+
}

‎demos/select/main.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<ion-toolbar>
2+
<ion-title>Select</ion-title>
3+
</ion-toolbar>
4+
5+
<ion-content class="outer-content">
6+
7+
<ion-list>
8+
<ion-list-header>Single Value Select</ion-list-header>
9+
10+
<ion-item>
11+
<ion-label>Gender</ion-label>
12+
<ion-select [(ngModel)]="gender">
13+
<ion-option value="f" checked="true">Female</ion-option>
14+
<ion-option value="m">Male</ion-option>
15+
</ion-select>
16+
</ion-item>
17+
18+
<ion-item>
19+
<ion-label>Gaming</ion-label>
20+
<ion-select [(ngModel)]="gaming">
21+
<ion-option value="nes">NES</ion-option>
22+
<ion-option value="n64">Nintendo64</ion-option>
23+
<ion-option value="ps">PlayStation</ion-option>
24+
<ion-option value="genesis">Sega Genesis</ion-option>
25+
<ion-option value="saturn">Sega Saturn</ion-option>
26+
<ion-option value="snes">SNES</ion-option>
27+
</ion-select>
28+
</ion-item>
29+
30+
<ion-item>
31+
<ion-label>Operating System</ion-label>
32+
<ion-select [(ngModel)]="os" submitText="Okay" cancelText="Nah">
33+
<ion-option value="dos">DOS</ion-option>
34+
<ion-option value="lunix">Linux</ion-option>
35+
<ion-option value="mac7">Mac OS 7</ion-option>
36+
<ion-option value="mac8">Mac OS 8</ion-option>
37+
<ion-option value="win3.1" checked>Windows 3.1</ion-option>
38+
<ion-option value="win95">Windows 95</ion-option>
39+
<ion-option value="win98">Windows 98</ion-option>
40+
</ion-select>
41+
</ion-item>
42+
43+
<ion-item>
44+
<ion-label>Music</ion-label>
45+
<ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
46+
<ion-option>Alice in Chains</ion-option>
47+
<ion-option>Green Day</ion-option>
48+
<ion-option>Nirvana</ion-option>
49+
<ion-option>Pearl Jam</ion-option>
50+
<ion-option>Smashing Pumpkins</ion-option>
51+
<ion-option>Soundgarden</ion-option>
52+
<ion-option (select)="stpSelect()">Stone Temple Pilots</ion-option>
53+
</ion-select>
54+
</ion-item>
55+
56+
<ion-item>
57+
<ion-label>Date</ion-label>
58+
<ion-select [(ngModel)]="month">
59+
<ion-option value="01">January</ion-option>
60+
<ion-option value="02">February</ion-option>
61+
<ion-option value="03">March</ion-option>
62+
<ion-option value="04">April</ion-option>
63+
<ion-option value="05">May</ion-option>
64+
<ion-option value="06">June</ion-option>
65+
<ion-option value="07">July</ion-option>
66+
<ion-option value="08">August</ion-option>
67+
<ion-option value="09">September</ion-option>
68+
<ion-option value="10">October</ion-option>
69+
<ion-option value="11">November</ion-option>
70+
<ion-option value="12" checked="true">December</ion-option>
71+
</ion-select>
72+
<ion-select [(ngModel)]="year">
73+
<ion-option>1989</ion-option>
74+
<ion-option>1990</ion-option>
75+
<ion-option>1991</ion-option>
76+
<ion-option>1992</ion-option>
77+
<ion-option>1993</ion-option>
78+
<ion-option checked="true">1994</ion-option>
79+
<ion-option>1995</ion-option>
80+
<ion-option>1996</ion-option>
81+
<ion-option>1997</ion-option>
82+
<ion-option>1998</ion-option>
83+
<ion-option>1999</ion-option>
84+
</ion-select>
85+
</ion-item>
86+
87+
</ion-list>
88+
89+
<ion-list>
90+
<ion-list-header>Multiple Value Select</ion-list-header>
91+
92+
<ion-item>
93+
<ion-label>Toppings</ion-label>
94+
<ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
95+
<ion-option value="bacon" checked="true">Bacon</ion-option>
96+
<ion-option value="olives">Black Olives</ion-option>
97+
<ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
98+
<ion-option value="peppers">Green Peppers</ion-option>
99+
<ion-option value="mushrooms">Mushrooms</ion-option>
100+
<ion-option value="onions">Onions</ion-option>
101+
<ion-option value="pepperoni">Pepperoni</ion-option>
102+
<ion-option value="pineapple">Pineapple</ion-option>
103+
<ion-option value="sausage">Sausage</ion-option>
104+
<ion-option value="Spinach">Spinach</ion-option>
105+
</ion-select>
106+
</ion-item>
107+
108+
<ion-item>
109+
<ion-label>Car Features</ion-label>
110+
<ion-select [(ngModel)]="carFeatures" [multiple]="true">
111+
<ion-option value="backupcamera">Backup Camera</ion-option>
112+
<ion-option value="heatedseats">Headted Seats</ion-option>
113+
<ion-option value="keyless">Keyless Entry</ion-option>
114+
<ion-option value="navigation">Navigation</ion-option>
115+
<ion-option value="parkingassist">Parking Assist</ion-option>
116+
<ion-option value="sunroof">Sun Roof</ion-option>
117+
</ion-select>
118+
</ion-item>
119+
120+
<ion-item>
121+
<ion-label>Pets</ion-label>
122+
<ion-select [(ngModel)]="pets" multiple>
123+
<ion-option *ngFor="#o of petOptions" [value]="o.value" [checked]="o.checked">{{o.text}}</ion-option>
124+
</ion-select>
125+
</ion-item>
126+
127+
<ion-item>
128+
<ion-label>Disabled</ion-label>
129+
<ion-select multiple disabled>
130+
<ion-option checked="true">Selected Text</ion-option>
131+
</ion-select>
132+
</ion-item>
133+
</ion-list>
134+
135+
</ion-content>

‎ionic/components/select/select.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@ import {Option} from '../option/option';
9898
* @property [multiple] - Whether or not the select component can accept multipl selections
9999
* @property [disabled] - Whether or not the select component is disabled or not
100100
* @property (change) - Any expression you want to evaluate when the selection has changed
101-
101+
*
102+
* @demo /docs/v2/demos/select/
102103
*/
103104
@Component({
104105
selector: 'ion-select',

0 commit comments

Comments
 (0)