Ionic - 选择

Ionic Select 选择 将创建一个带有选择选项的简单菜单供用户选择。此选择菜单在不同平台上的外观会有所不同，因为其样式由浏览器处理。

使用选择

首先，我们将创建一个 label 并添加 item-input 和 item-select 类。第二个类将为选择表单添加额外的样式，然后我们将在其中添加 input-label 类，该类将用于向我们的选择元素添加名称。我们还将添加带有 option 的 select。这是常规的 HTML5 选择元素。以下示例显示了带有三个选项的 Ionic 选择。

<label class = "item item-input item-select">
   <div class = "input-label">
      Select
   </div>
	
   <select>
      <option>Option 1</option>
      <option selected>Option 2</option>
      <option>Option 3</option>
   </select>
</label>

上述代码将在屏幕产生以下内容 −

设置 Select 样式

以下示例将向您展示如何将样式应用于选择。我们正在使用 Ionic 颜色创建一个包含九个不同样式选择元素的列表。由于我们使用带有项目的列表，因此 item 将是颜色类的前缀。

<div class = "list">
   <label class = "item item-input item-select item-light">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-stable">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-positive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-calm">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-balanced">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-energized">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-assertive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-royal">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-dark">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>
</div>

上述代码将在屏幕产生以下内容 −