ionic フォームと入力ボックス

list クラスは同様に input 要素に使用できます。item-input と item クラスはテキストボックスとそのラベルを指定します。

入力ボックスの属性: placeholder

以下の例では、デフォルトで幅100%（左右に枠線なし）であり、placeholder 属性を使用して入力フィールドの期待値のヒント情報を設定します。

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>

試してみる »

入力ボックスの属性: input-label

input-label を使用して、ラベルを入力ボックス input の左側に配置します。

<div class="list">
  <label class="item item-input">
    <span class="input-label">用户名：</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">密码：</span>
    <input type="password">
  </label>
</div>

試してみる »

スタックラベル

スタックラベルは通常、入力ボックスの上部にあります。各オプションは item-stacked-label クラスで指定します。 各入力ボックスには input-label を指定する必要があります。以下の例でも placeholder 属性を使用して情報入力のヒントを設定しています。

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="John">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Suhr">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="[email protected]">
  </label>
</div>

試してみる »

フローティングラベル

フローティングラベルはスタックラベルに似ていますが、フローティングラベルにはアニメーション効果があります。各オプションに item-floating-label クラスを指定する必要があり、入力ラベルには input-label を指定する必要があります。

<div class="list">
  <label class="item item-input item-floating-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="Email">
  </label>
</div>

試してみる »

埋め込みフォーム

デフォルトでは、各入力フィールドの幅は100%ですが、list list-inset または card クラスを使用してフォームの内側の余白(padding)を設定できます。 card クラスには影(シャドウ)があります。

<div class="list list-inset">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
</div>

試してみる »

埋め込み入力フィールド

list-inset を使用して埋め込みリストを設定します。 item-input-inset スタイルを使用すると、ボタンを埋め込むことができます。

<div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Email">
    </label>
    <button class="button button-small">
      Submit
    </button>
  </div>

</div>

試してみる »

アイコン付き入力ボックス

item-input 入力ボックスにはアイコンを簡単に追加できます。 アイコンは <input> の前に追加できます。

<div class="list list-inset">
  <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
  </label>
</div>

試してみる »

ヘッダー入力ボックス

入力ボックスはヘッダーに配置でき、送信ボタンやキャンセルボタンを追加できます。

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="搜索">
  </label>
  <button class="button button-clear">
    取消
  </button>
</div>

試してみる »

その他の拡張