Ionic选择组件 _Ionic选择组件

Ionic选择组件提供了一个带有选择选项的选择菜单, 供用户在多个选项集之间进行选择。选择是类似于本机< select> 元素的表单控件。当你点击选择时, 将立即出现一个对话框, 其中包含所有包含的选项。对于不同的平台, 选择菜单的外观将有所不同, 因为其样式由浏览器处理。我们可以使用标准的< ion-select> 元素访问Ionic选择。
一个选择组件始终与子< ion-select-option> 元素一起使用。如果< ion-select-option> 不具有value属性, 则其文本将用作值。
如果< ion-select> 组件设置了value属性, 则将基于该值确定所选的选项。另一方面, 如果未设置该值, 则< ion-select-option> 上将使用select属性。
选择组件使用接口AtertController API来打开警报中的选项覆盖。通过将操作表或弹出窗口传递给interface属性, 可以更改为使用ActionSheetController API或PopoverController API。
选择组件可以有两种类型：

单选
多项选择

单选
默认情况下, 选择仅允许你选择一个选项。在此选择中, 警报界面显示单选按钮样式的选项列表。选择组件的值仅接收所选选项值的值。
选择按钮
警报界面支持两个按钮：“取消”和“确定”。可以使用cancelText和okText属性来自定义按钮文本。
例
以下示例有助于理解单个选择组件的用法。

< ion-header> < ion-toolbar> < ion-title> SelectExample < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light" fullscreen> < ion-list> < ion-list-header> Single Selection< /ion-list-header> < ion-item> < ion-label> Gender< /ion-label> < ion-select placeholder="Select One"> < ion-select-option value="http://www.srcmini.com/f"> Female< /ion-select-option> < ion-select-option value="http://www.srcmini.com/m"> Male< /ion-select-option> < /ion-select> < /ion-item> < ion-item> < ion-label> Face Color< /ion-label> < ion-select value="http://www.srcmini.com/brown" okText="Okay" cancelText="Dismiss"> < ion-select-option value="http://www.srcmini.com/light"> Light< /ion-select-option> < ion-select-option value="http://www.srcmini.com/fair"> Fair< /ion-select-option> < ion-select-option value="http://www.srcmini.com/wheatish"> Wheatish< /ion-select-option> < ion-select-option value="http://www.srcmini.com/dark"> Dark< /ion-select-option> < /ion-select> < /ion-item> < /ion-list> < /ion-content>

输出：
当你执行上述代码片段时, 它将给出以下输出。

文章图片
如果点击选择, 则会立即出现一个对话框, 其中包含所有包含的选项。我们将获得以下输出。

文章图片
多项选择
多个选择使用多个属性, 这些属性使你可以从一组选择选项中选择多个选项。在此选择中, 警报界面显示复选框样式的选项列表。在这里, 选择组件的值将接收所有选定选项值的数组。
例

< ion-header> < ion-toolbar> < ion-title> SelectExample < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light" fullscreen> < ion-list> < ion-list-header> Multiple Selection< /ion-list-header> < ion-item> < ion-label> Flowers< /ion-label> < ion-select multiple="true" cancelText="Nah" okText="Okay!"> < ion-select-option value="http://www.srcmini.com/orchid"> Orchid< /ion-select-option> < ion-select-option value="http://www.srcmini.com/lily"> Lily< /ion-select-option> < ion-select-option value="http://www.srcmini.com/rose"> Rose< /ion-select-option> < ion-select-option value="http://www.srcmini.com/lotus"> Lotus< /ion-select-option> < ion-select-option value="http://www.srcmini.com/jasmine"> Jasmine< /ion-select-option> < ion-select-option value="http://www.srcmini.com/marigold"> Marigold< /ion-select-option> < /ion-select> < /ion-item> < ion-item> < ion-label> Pets< /ion-label> < ion-select multiple="true"> < ion-select-option value="http://www.srcmini.com/bird" selected> Bird< /ion-select-option> < ion-select-option value="http://www.srcmini.com/cat"> Cat< /ion-select-option> < ion-select-option value="http://www.srcmini.com/dog"> Dog< /ion-select-option> < ion-select-option value="http://www.srcmini.com/lion"> Lion< /ion-select-option> < /ion-select> < /ion-item> < /ion-list> < /ion-content>

输出：

文章图片
如果点击选择, 则会立即出现一个对话框, 其中包含所有包含的选项。现在, 你可以根据需要选择多个选项。

文章图片
界面选项默认情况下, 选择组件使用接口AtertController API。但是, 我们也可以通过将操作表或弹出窗口传递给interface属性, 以使用ActionSheetController API或PopoverController API对其进行更改。以下示例对其进行了更清晰的说明。
例
Home.page.html

< ion-header> < ion-toolbar> < ion-title> SelectExample < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light" fullscreen> < ion-list> < ion-list-header> Interface Options< /ion-list-header> < ion-item> < ion-label> Alert< /ion-label> < ion-select [interfaceOptions]="customAlertOptions" interface="alert" multiple="true" placeholder="Select One"> < ion-select-option value="http://www.srcmini.com/bacon"> Bacon< /ion-select-option> < ion-select-option value="http://www.srcmini.com/olives"> Black Olives< /ion-select-option> < ion-select-option value="http://www.srcmini.com/xcheese"> Extra Cheese< /ion-select-option> < ion-select-option value="http://www.srcmini.com/peppers"> Green Peppers< /ion-select-option> < ion-select-option value="http://www.srcmini.com/mushrooms"> Mushrooms< /ion-select-option> < /ion-select> < /ion-item> < ion-item> < ion-label> Popover< /ion-label> < ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One"> < ion-select-option value="http://www.srcmini.com/lily"> Lily< /ion-select-option> < ion-select-option value="http://www.srcmini.com/rose"> Rose< /ion-select-option> < ion-select-option value="http://www.srcmini.com/lotus"> Lotus< /ion-select-option> < ion-select-option value="http://www.srcmini.com/jasmine"> Jasmine< /ion-select-option> < ion-select-option value="http://www.srcmini.com/marigold"> Marigold< /ion-select-option> < /ion-select> < /ion-item> < ion-item> < ion-label> Action Sheet< /ion-label> < ion-select [interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One"> < ion-select-option value="http://www.srcmini.com/red"> Red< /ion-select-option> < ion-select-option value="http://www.srcmini.com/yellow"> Yellow< /ion-select-option> < ion-select-option value="http://www.srcmini.com/orange"> Orange< /ion-select-option> < ion-select-option value="http://www.srcmini.com/green"> Green< /ion-select-option> < /ion-select> < /ion-item> < /ion-list> < /ion-content>

Home.page.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { customAlertOptions: any = { header: 'Pizza Toppings', subHeader: 'Select your toppings', message: '$2.00 per topping', translucent: true }; customPopoverOptions: any = { header: 'Flower Name', subHeader: 'Select your flower name', message: 'Only select your favorite flower' }; customActionSheetOptions: any = { header: 'Colors', subHeader: 'Select your favorite color' }; }

输出：
当你执行上面的Ionic应用程序时, 它将给出以下输出。