mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
d563aa65a3
BREAKING CHANGES: Renamed all Ionic events to start with `ion`. The following events were renamed: - **Checkbox** - `change` -> `ionChange` - **DateTime** - `change` -> `ionChange` - `cancel` -> `ionCancel` - **InfiniteScroll** - `infinite` -> `ionInfinite` - **Menu** - `opening` -> `ionDrag` - `opened` -> `ionOpen` - `closed` -> `ionClose` - **Option** - `select` -> `ionSelect` - **Picker** - `change` -> `ionChange` - **RadioButton** - `select` -> `ionSelect` - **RadioGroup** - `change` -> `ionChange` - **Refresher** - `refresh` -> `ionRefresh` - `pulling` -> `ionPull` - `start` -> `ionStart` - **Searchbar** - `input` -> `ionInput` - `blur` -> `ionBlur` - `focus` -> `ionFocus` - `cancel` -> `ionCancel` - `clear` -> `ionClear` - **Segment** - `change` -> `ionChange` - `select` -> `ionSelect` - **Select** - `change` -> `ionChange` - `cancel` -> `ionCancel` - **Slides** - `willChange` -> `ionWillChange` - `didChange` -> `ionDidChange` - `move` -> `ionDrag` - **TabButton** - `select` -> `ionSelect` - **Tab** - `select` -> `ionSelect` - **Tabs** - `change` -> `ionChange` - **Toggle** - `change` -> `ionChange` Closes #6568
125 lines
4.3 KiB
HTML
125 lines
4.3 KiB
HTML
<ion-toolbar>
|
|
<ion-title>Select</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-content class="outer-content">
|
|
|
|
<ion-list>
|
|
<ion-list-header>Single Value Select</ion-list-header>
|
|
|
|
<ion-item>
|
|
<ion-label>Gender</ion-label>
|
|
<ion-select [(ngModel)]="gender">
|
|
<ion-option value="f">Female</ion-option>
|
|
<ion-option value="m">Male</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Gaming</ion-label>
|
|
<ion-select [(ngModel)]="gaming" okText="Okay" cancelText="Dismiss">
|
|
<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-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Date</ion-label>
|
|
<ion-select (ionChange)="monthChange($event)">
|
|
<ion-option value="01">January</ion-option>
|
|
<ion-option value="02">February</ion-option>
|
|
<ion-option value="03" checked="true">March</ion-option>
|
|
<ion-option value="04">April</ion-option>
|
|
<ion-option value="05">May</ion-option>
|
|
<ion-option value="06">June</ion-option>
|
|
<ion-option value="07">July</ion-option>
|
|
<ion-option value="08">August</ion-option>
|
|
<ion-option value="09">September</ion-option>
|
|
<ion-option value="10">October</ion-option>
|
|
<ion-option value="11">November</ion-option>
|
|
<ion-option value="12">December</ion-option>
|
|
</ion-select>
|
|
<ion-select (ionChange)="yearChange($event)">
|
|
<ion-option>1989</ion-option>
|
|
<ion-option>1990</ion-option>
|
|
<ion-option>1991</ion-option>
|
|
<ion-option>1992</ion-option>
|
|
<ion-option>1993</ion-option>
|
|
<ion-option checked="true">1994</ion-option>
|
|
<ion-option>1995</ion-option>
|
|
<ion-option>1996</ion-option>
|
|
<ion-option>1997</ion-option>
|
|
<ion-option>1998</ion-option>
|
|
<ion-option>1999</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
|
|
<ion-list>
|
|
<ion-list-header>Multiple Value Select</ion-list-header>
|
|
|
|
<ion-item>
|
|
<ion-label>Toppings</ion-label>
|
|
<ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
|
|
<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-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Pets</ion-label>
|
|
<ion-select [(ngModel)]="pets" multiple="true" [alertOptions]="petAlertOpts">
|
|
<ion-option *ngFor="let o of petData" [value]="o.value">{{o.text}}</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Disabled</ion-label>
|
|
<ion-select multiple disabled="true">
|
|
<ion-option checked="true">Selected Text</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
|
|
<ion-list>
|
|
<ion-list-header>Action Sheet Interface Select</ion-list-header>
|
|
|
|
<ion-item>
|
|
<ion-label>Mute Notifications</ion-label>
|
|
<ion-select [(ngModel)]="notifications" interface="action-sheet">
|
|
<ion-option value="mute_15">For 15 Minutes</ion-option>
|
|
<ion-option value="mute_1">For 1 Hour</ion-option>
|
|
<ion-option value="mute_23">For 24 Hours</ion-option>
|
|
<ion-option value="mute_inf">Until I turn it back on</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Rating</ion-label>
|
|
<ion-select [(ngModel)]="rating" interface="action-sheet">
|
|
<ion-option value="1">1 Star</ion-option>
|
|
<ion-option value="2">2 Stars</ion-option>
|
|
<ion-option value="3">3 Stars</ion-option>
|
|
<ion-option value="4">4 Stars</ion-option>
|
|
<ion-option value="5">5 Stars</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
|
|
</ion-content>
|