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。

选择组件可以有两种类型：

1. 单选
2. 多项选择

单选

默认情况下, 选择仅允许你选择一个选项。在此选择中, 警报界面显示单选按钮样式的选项列表。选择组件的值仅接收所选选项值的值。

选择按钮

警报界面支持两个按钮：“取消”和“确定”。可以使用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="f">Female</ion-select-option>
        <ion-select-option value="m">Male</ion-select-option>
      </ion-select>
    </ion-item>
  
    <ion-item>
      <ion-label>Face Color</ion-label>
        <ion-select value="brown" okText="Okay" cancelText="Dismiss">
        <ion-select-option value="light">Light</ion-select-option>
        <ion-select-option value="fair">Fair</ion-select-option>
        <ion-select-option value="wheatish">Wheatish</ion-select-option>
        <ion-select-option value="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="orchid">Orchid</ion-select-option>
        <ion-select-option value="lily">Lily</ion-select-option>
        <ion-select-option value="rose">Rose</ion-select-option>
        <ion-select-option value="lotus">Lotus</ion-select-option>
        <ion-select-option value="jasmine">Jasmine</ion-select-option>
        <ion-select-option value="marigold ">Marigold</ion-select-option>
      </ion-select>
    </ion-item>
      
    <ion-item>
      <ion-label>Pets</ion-label>
      <ion-select multiple="true">
        <ion-select-option value="bird" selected>Bird</ion-select-option>
        <ion-select-option value="cat">Cat</ion-select-option>
        <ion-select-option value="dog">Dog</ion-select-option>
        <ion-select-option value="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="bacon">Bacon</ion-select-option>
        <ion-select-option value="olives">Black Olives</ion-select-option>
        <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
        <ion-select-option value="peppers">Green Peppers</ion-select-option>
        <ion-select-option value="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="lily">Lily</ion-select-option>
        <ion-select-option value="rose">Rose</ion-select-option>
        <ion-select-option value="lotus">Lotus</ion-select-option>
        <ion-select-option value="jasmine">Jasmine</ion-select-option>
        <ion-select-option value="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="red">Red</ion-select-option>
        <ion-select-option value="yellow">Yellow</ion-select-option>
        <ion-select-option value="orange">Orange</ion-select-option>
        <ion-select-option value="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应用程序时, 它将给出以下输出。

现在, 当你选择弹出选项时, 将出现以下屏幕。在这里, 你还可以检查其他选项, 例如警报和操作表。