イオン-フォーム

イオンフォーム*は、主にユーザーとのやり取りや必要な情報の収集に使用されます。この章では、さまざまなテキスト入力フォームについて説明します。以降の章では、Ionicフレームワークを使用して他のフォーム要素を使用する方法について説明します。

入力フォームを使用する

フォームを使用する最良の方法は、 list と item をメインクラスとして使用することです。通常、アプリは複数のフォーム要素で構成されるため、リストとして整理することは理にかなっています。次の例では、item要素が label タグであることがわかります。

他の要素を使用できますが、ラベルを使用すると、要素の任意の部分をタップして、テキスト入力に集中できます。入力テキストとは異なる外観の*プレースホルダー*を設定でき、入力を開始するとすぐに非表示になります。これは次の例で確認できます。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

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

イオンフォーム入力

イオンラベル

Ionicは、ラベルに他のいくつかのオプションを提供します。テキストを入力するときにプレースホルダーを左側に配置する場合は、 input-label クラスを使用できます。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

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

イオン入力ラベル

積み上げラベル

*Stacked label* は、入力の上または下にラベルを移動できる他のオプションです。 これを実現するには、ラベル要素に *item-stacked-label* クラスを追加し、新しい要素を作成して *input-label* クラスを割り当てる必要があります。 一番上に配置する場合は、 *input* タグの前にこの要素を追加するだけです。 これを次の例に示します。

*span* タグは *input* タグの前にあることに注意してください。 場所を変更すると、画面の下に表示されます。

<div class = "list">
   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 1</span>
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

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

イオン積み上げラベル

フローティングラベル

フローティングラベル*は、使用できる3番目のオプションです。これらのラベルは、入力を開始する前に非表示になります。タイピングが開始されるとすぐに、エレメントの上に浮遊アニメーションが表示されます。スタックラベルを使用したのと同じ方法でフローティングラベルを使用できます。唯一の違いは、今回は *item-floating-label クラスを使用することです。

<div class = "list">
   <label class = "item item-input item-floating-label">
      <span class = "input-label"t>Label 1</span>
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input item-floating-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

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

イオンフローティングラベル

インセット入力

最後の章では、イオン要素を挿入する方法について説明しました。 item-input-inset クラスをアイテムに追加し、 item-input-wrapper をラベルに追加して、入力を挿入することもできます。ラッパーはラベルにスタイルを追加します。

ラベルの横に他の要素を追加すると、ラベルのサイズは新しい要素に合わせて調整されます。ラベル内に要素（通常はアイコン）を追加することもできます。

次の例は、2つの挿入入力を示しています。最初のラベルにはラベルの横にボタンがあり、2番目のラベルにはアイコンがあります。 placeholder-icon クラスを使用して、プレースホルダーテキストと同じ色のアイコンを作成しました。これがないと、アイコンはラベルの色を使用します。

<div class = "list">
   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <input type = "text" placeholder = "Placeholder 1"/>
      </label>
      <button class = "button">button</button>
   </div>

   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <i class = "icon ion-edit placeholder-icon"></i>
         <input type = "text" placeholder = "Placeholder 2"/>
      </label>
   </div>
</div>

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

イオンインセット入力

Ionic-forms

イオン-フォーム

入力フォームを使用する

イオンラベル

積み上げラベル

フローティングラベル

インセット入力

目次