ionic 表單和輸入框

ionic 表單和輸入框

list 類同樣可以用于 input 元素。item-input 和 item 類指定了文本框及其標(biāo)簽。

輸入框?qū)傩裕簆laceholder

以下實例中，默認(rèn)為100%寬度（左右兩側(cè)沒有邊框），并使用 placeholder 屬性設(shè)置輸入字段預(yù)期值的提示信息。

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

嘗試一下 ?

輸入框?qū)傩裕篿nput-label

使用 input-label 將標(biāo)簽放置于輸入框 input 的左側(cè)。

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

嘗試一下 ?

堆疊標(biāo)簽

堆疊標(biāo)簽通常位于輸入框的頭部。每個選項使用 item-stacked-label 類指定。每個輸入框需要指定 input-label。以下實例也使用了 placeholder 屬性來設(shè)置信息輸入提示。

<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="john@suhr.com">
  </label>
</div>

嘗試一下 ?

浮動標(biāo)簽

浮動標(biāo)簽類似于堆疊標(biāo)簽，但浮動標(biāo)簽有一個動畫的效果，每個選項需要指定 item-floating-label 類，輸入標(biāo)簽需要指定 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>

嘗試一下 ?

內(nèi)嵌表單

默認(rèn)情況下每個輸入域?qū)挾榷际?00%，但我們可以使用 list list-inset 或 card 類設(shè)置表單的內(nèi)邊距(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>

嘗試一下 ?

內(nèi)嵌輸入域

使用 list-inset 設(shè)置內(nèi)嵌實體列表。使用 item-input-inset 樣式可以內(nèi)嵌一個按鈕。

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

嘗試一下 ?

帶圖標(biāo)的輸入框

item-input 輸入框可以很簡單的添加圖標(biāo)。圖標(biāo)可以在 <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>

嘗試一下 ?