ion-select
Ionic4项目中我们可以使用Ionic4选择框组件ion-select对项目进行布局。 ion-select官方文档地址:https://ionicframework.com/docs/api/selectSelects are form controls to select an option, or options, from a set of options, similar to a native element. When a user taps the select, a dialog appears with all of the options in a large, easy to select list.
A select should be used with child
elements. If the child option is not given a value
attribute then its text will be used as the value.
If value
is set on the
, the selected option will be chosen based on that value. Otherwise, the selected
attribute can be used on the
.
Interfaces
By default, select uses the action-sheet
or popover
, respectively, to the interface
property. Read on to the other sections for the limitations of the different interfaces.
Single Selection
By default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The action sheet interface can only be used with a single value select. The select component's value receives the value of the selected option's value.
Multiple Selection
By adding the multiple
attribute to select, users are able to select multiple options. When multiple options can be selected, the alert overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.
Note: the action-sheet
and popover
interfaces will not work with multiple selection.
Object Value References
When using objects for select values, it is possible for the identities of these objects to change if they are coming from a server or database, while the selected value's identity remains the same. For example, this can occur when an existing record with the desired object value is loaded into the select, but the newly retrieved select options now have different identities. This will result in the select appearing to have no value at all, even though the original selection in still intact.
By default, the select uses object equality (===
) to determine if an option is selected. This can be overridden by providing a property name or a function to the compareWith
property.
Select Buttons
By default, the alert has two buttons: Cancel
and OK
. Each button's text can be customized using the cancelText
and okText
properties.
The action-sheet
and popover
interfaces do not have an OK
button, clicking on any of the options will automatically close the overlay and select that value. The popover
interface does not have a Cancel
button, clicking on the backdrop will close the overlay.
Interface Options
Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the interfaceOptions
property. This can be used to pass a custom header, subheader, css class, and more. See the
ion-select 用法(Usage)
Single Selection
<ion-list>
<ion-list-header>Single Selectionion-list-header>
<ion-item>
<ion-label>Genderion-label>
<ion-select placeholder="Select One">
<ion-select-option value="f">Femaleion-select-option>
<ion-select-option value="m">Maleion-select-option>
ion-select>
ion-item>
<ion-item>
<ion-label>Hair Colorion-label>
<ion-select value="brown" okText="Okay" cancelText="Dismiss">
<ion-select-option value="brown">Brownion-select-option>
<ion-select-option value="blonde">Blondeion-select-option>
<ion-select-option value="black">Blackion-select-option>
<ion-select-option value="red">Redion-select-option>
ion-select>
ion-item>
ion-list>
Multiple Selection
<ion-list>
<ion-list-header>Multiple Selectionion-list-header>
<ion-item>
<ion-label>Toppingsion-label>
<ion-select multiple="true" cancelText="Nah" okText="Okay!">
<ion-select-option value="bacon">Baconion-select-option>
<ion-select-option value="olives">Black Olivesion-select-option>
<ion-select-option value="xcheese">Extra Cheeseion-select-option>
<ion-select-option value="peppers">Green Peppersion-select-option>
<ion-select-option value="mushrooms">Mushroomsion-select-option>
<ion-select-option value="onions">Onionsion-select-option>
<ion-select-option value="pepperoni">Pepperoniion-select-option>
<ion-select-option value="pineapple">Pineappleion-select-option>
<ion-select-option value="sausage">Sausageion-select-option>
<ion-select-option value="Spinach">Spinachion-select-option>
ion-select>
ion-item>
<ion-item>
<ion-label>Petsion-label>
<ion-select multiple="true">
<ion-select-option value="bird" selected>Birdion-select-option>
<ion-select-option value="cat">Cation-select-option>
<ion-select-option value="dog" selected>Dogion-select-option>
<ion-select-option value="honeybadger">Honey Badgerion-select-option>
ion-select>
ion-item>
ion-list>
Objects as Values
<ion-list>
<ion-list-header>Objects as Values (compareWith)ion-list-header>
<ion-item>
<ion-label>Usersion-label>
<ion-select [compareWith]="compareWith">
<ion-select-option *ngFor="let user of users">{{user.first + ' ' + user.last}}ion-select-option>
ion-select>
ion-item>
ion-list>
import { Component } from '@angular/core';
@Component({
selector: 'select-example',
templateUrl: 'select-example.html',
styleUrls: ['./select-example.css'],
})
export class SelectExample {
users: any[] = [
{
id: 1,
first: 'Alice',
last: 'Smith',
},
{
id: 2,
first: 'Bob',
last: 'Davis',
},
{
id: 3,
first: 'Charlie',
last: 'Rosenburg',
}
];
compareWithFn = (o1, o2) => {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
};
compareWith = compareWithFn;
}
Interface Options
<ion-list>
<ion-list-header>Interface Optionsion-list-header>
<ion-item>
<ion-label>Alertion-label>
<ion-select [interfaceOptions]="customAlertOptions" interface="alert" multiple="true" placeholder="Select One">
<ion-select-option value="bacon">Baconion-select-option>
<ion-select-option value="olives">Black Olivesion-select-option>
<ion-select-option value="xcheese">Extra Cheeseion-select-option>
<ion-select-option value="peppers">Green Peppersion-select-option>
<ion-select-option value="mushrooms">Mushroomsion-select-option>
<ion-select-option value="onions">Onionsion-select-option>
<ion-select-option value="pepperoni">Pepperoniion-select-option>
<ion-select-option value="pineapple">Pineappleion-select-option>
<ion-select-option value="sausage">Sausageion-select-option>
<ion-select-option value="Spinach">Spinachion-select-option>
ion-select>
ion-item>
<ion-item>
<ion-label>Popoverion-label>
<ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
<ion-select-option value="brown">Brownion-select-option>
<ion-select-option value="blonde">Blondeion-select-option>
<ion-select-option value="black">Blackion-select-option>
<ion-select-option value="red">Redion-select-option>
ion-select>
ion-item>
<ion-item>
<ion-label>Action Sheetion-label>
<ion-select [interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
<ion-select-option value="red">Redion-select-option>
<ion-select-option value="purple">Purpleion-select-option>
<ion-select-option value="yellow">Yellowion-select-option>
<ion-select-option value="orange">Orangeion-select-option>
<ion-select-option value="green">Greenion-select-option>
ion-select>
ion-item>
ion-list>
import { Component } from '@angular/core';
@Component({
selector: 'select-example',
templateUrl: 'select-example.html',
styleUrls: ['./select-example.css'],
})
export class SelectExample {
customAlertOptions: any = {
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.00 per topping',
translucent: true
};
customPopoverOptions: any = {
header: 'Hair Color',
subHeader: 'Select your hair color',
message: 'Only select your dominant hair color'
};
customActionSheetOptions: any = {
header: 'Colors',
subHeader: 'Select your favorite color'
};
}
Single Selection
<ion-list>
<ion-list-header>Single Selectionion-list-header>
<ion-item>
<ion-label>Genderion-label>
<ion-select placeholder="Select One">
<ion-select-option value="f">Femaleion-select-option>
<ion-select-option value="m">Maleion-select-option>
ion-select>
ion-item>
<ion-item>
<ion-label>Hair Colorion-label>
<ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="brown">Brownion-select-option>
<ion-select-option value="blonde">Blondeion-select-option>
<ion-select-option value="black">Blackion-select-option>
<ion-select-option value="red">Redion-select-option>
ion-select>
ion-item>
ion-list>
Multiple Selection
<ion-list>
<ion-list-header>Multiple Selectionion-list-header>
<ion-item>
<ion-label>Toppingsion-label>
<ion-select multiple="true" cancel-text="Nah" ok-text="Okay!">
<ion-select-option value="bacon">Baconion-select-option>
<ion-select-option value="olives">Black Olivesion-select-option>
<ion-select-option value="xcheese">Extra Cheeseion-select-option>
<ion-select-option value="peppers">Green Peppersion-select-option>
<ion-select-option value="mushrooms">Mushroomsion-select-option>
<ion-select-option value="onions">Onionsion-select-option>
<ion-select-option value="pepperoni">Pepperoniion-select-option>
<ion-select-option value="pineapple">Pineappleion-select-option>