mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +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
73 lines
2.5 KiB
HTML
73 lines
2.5 KiB
HTML
<ion-toolbar>
|
|
<ion-title>Select Item: Multiple Value</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-content class="outer-content">
|
|
|
|
<ion-item>
|
|
<ion-label>Toppings</ion-label>
|
|
<ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!" class="e2eSelectToppings">
|
|
<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>Car Features</ion-label>
|
|
<ion-select [(ngModel)]="carFeatures" [multiple]="true" (ionChange)="carChange($event)">
|
|
<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>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Pets</ion-label>
|
|
<ion-select [(ngModel)]="pets" multiple>
|
|
<ion-option *ngFor="let o of petOptions" [value]="o.value">{{o.text}}</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Disabled</ion-label>
|
|
<ion-select multiple disabled>
|
|
<ion-option checked="true">Selected Text</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<p aria-hidden="true" padding>
|
|
<code>toppings: {{toppings}}</code><br>
|
|
<code>carFeatures: {{carFeatures}}</code><br>
|
|
<code>pets: {{pets}}</code><br>
|
|
</p>
|
|
|
|
<form [ngFormModel]="authForm" (ngSubmit)="onSubmit(authForm.value)">
|
|
<ion-list padding-vertical>
|
|
<ion-item>
|
|
<ion-input ngControl="name" type="text"></ion-input>
|
|
</ion-item>
|
|
<ion-item class="no-border">
|
|
<ion-label>Select</ion-label>
|
|
<ion-select multiple="true" ngControl="select">
|
|
<ion-option>1</ion-option>
|
|
<ion-option>2</ion-option>
|
|
<ion-option>3</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
<button full block class="no-margin" type="submit">Submit</button>
|
|
</ion-list>
|
|
</form>
|
|
|
|
</ion-content>
|