ionic 选择

ionic 选择组件提供了一个带有选择选项的选择菜单，供用户在多个选项集之间进行选择。选择是类似于本机元素的表单控件。当您点击选择时，将立即出现一个对话框，其中包含所有包含的选项。对于不同的平台，选择菜单的外观将有所不同，因为其样式由浏览器处理。我们可以使用标准的元素访问 ionic 选择。

一个选择组件始终与子元素一起使用。如果没有值属性，则其文本将用作值。

如果组件设置了value属性，则将基于该value决定所选的选项。另一方面，如果未设置该值，则上将使用select属性。

选择组件使用接口AtertController API来打开警报中的选项覆盖。可以通过将操作表或弹出窗口传递给interface属性，以更改为使用ActionSheetController API或PopoverController API。

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

• 单选
• 多项选择

单选

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

选择按钮

警报界面支持两个按钮： cancel和ok 。可以使用cancelText和okText属性来自定义按钮文本。

例

以下示例有助于理解单个选择组件的用法。

  
    
      SelectExample
    
  


  
    Single Selection
  
    
      Gender
      
        Female
        Male
      
    
  
    
      Face Color
        
        Light
        Fair
        Wheatish
        Dark
      
    
  

输出：

当您执行上述代码片段时，它将给出以下输出。

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

多项选择

多个选择使用多个属性，使您可以从一组选择选项中选择多个选项。在此选择中，警报界面显示复选框样式的选项列表。在这里，选择组件的值将接收所有选择的选项值的数组。

例

  
    
      SelectExample
    
  


  
    Multiple Selection
    
      Flowers
      
        Orchid
        Lily
        Rose
        Lotus
        Jasmine
        Marigold
      
    
      
    
      Pets
      
        Bird
        Cat
        Dog
        Lion
      
    
  

输出：

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

界面选项

默认情况下，选择组件使用接口AtertController API。但是，我们也可以通过将操作表或弹出窗口传递给interface属性来更改它以使用ActionSheetController API或PopoverController API。以下示例对其进行了更清晰的说明。

例

Home.page.html

  
    
      SelectExample
    
  


  
    Interface Options      
    
      Alert
      
        Bacon
        Black Olives
        Extra Cheese
        Green Peppers
        Mushrooms
      
    
      
    
      Popover
      
        Lily
        Rose
        Lotus
        Jasmine
        Marigold
      
    
      
    
      Action Sheet
      
        Red
        Yellow
        Orange
        Green
      
      
  

主页

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应用程序时，它将提供以下输出。

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