Ionic-select

イオン-選択

*Ionic Select* は、ユーザーが選択する選択オプションを備えたシンプルなメニューを作成します。 この選択メニューは、そのスタイルがブラウザによって処理されるため、プラットフォームごとに外観が異なります。

選択を使用する

まず、 label を作成し、 item-input クラスと item-select クラスを追加します。 2番目のクラスは、選択フォームに追加のスタイリングを追加し、その中に名前を選択要素に追加するために使用される input-label クラスを追加します。 また、内部に option を含む select を追加します。 これは通常のHTML5 select要素です。 次の例は、3つのオプションを持つイオン選択を示しています。

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

上記のコードは、次の画面を生成します-

イオン選択

スタイリングセレクト

次の例は、選択にスタイルを適用する方法を示します。 イオン色を使用して、9つの異なるスタイルの選択要素を含むリストを作成しています。 アイテムを含むリストを使用しているため、 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>

上記のコードは、次の画面を生成します-

イオン選択色