Ionic-range

イオン-範囲

イオン範囲は、何かのレベルを選択して表示するために使用されます。 これは、最大値と最小値の相関関係にある実際の値を表します。 IonicはRangeを操作する簡単な方法を提供します。

範囲を使用する

範囲は内部アイテム要素として使用されます。 使用されるクラスは*範囲*です。 このクラスを item クラスの後に配置します。 これにより、範囲が配置されるコンテナが準備されます。 コンテナを作成したら、 input を追加し、それに range タイプと name 属性を割り当てる必要があります。

<div class = "item range">
   <input type = "range" name = "range1">
</div>

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

イオン範囲

アイコンを追加する

通常、範囲にはデータを明確に表示するためのアイコンが必要です。 範囲入力の前後にアイコンを追加して、範囲要素の両側に配置するだけです。

<div class = "item range">
   <i class = "icon ion-volume-low"></i>
   <input type = "range" name = "volume">
   <i class = "icon ion-volume-high"></i>
</div>

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

イオン範囲アイコン

スタイリング範囲

次の例では、イオン色で範囲をスタイルする方法を示します。 カラークラスは、 range プレフィックスを使用します。 9つの範囲を持つリストを作成し、異なるスタイルを設定します。

<div class = "list">
   <div class = "item range range-light">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-stable">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-positive">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-calm">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-balanced">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-energized">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-assertive">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-royal">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-dark">
      <input type = "range" name = "volume">
   </div>
</div>

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

イオン範囲の色