Ionic选择

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

使用选择

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

<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>

上面的代码将生成以下屏幕 -

Ionic选择

造型选择

以下示例将向您展示如何应用样式进行选择。我们正在使用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>

上面的代码将生成以下屏幕 -

Ionic选择颜色