Ionic入門五：表單

一、輸入框

list 類同樣可以用於 input 元素。item-input 和 item 類指定了文本框及其標籤。

1.輸入框屬性：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>

 



2.輸入框屬性：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>

 



3.堆疊標籤

堆疊標籤通常位於輸入框的頭部。每個選項使用 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>

 



4.浮動標籤

浮動標籤類似於堆疊標籤，但浮動標籤有一個動畫的效果，每個選項需要指定 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>

 



5.內嵌表單

默認情況下每個輸入域寬度都是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>

 



6.內嵌輸入域

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

 



7.帶圖標的輸入框

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

 



8.頭部輸入框

輸入框可放置在頭部，並可添加提交或取消按鈕。

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

 



二、ionic Toggle(切換開關)

切換開關類似與 HTML 的 checkbox 標籤，但它更易於在移動設備上使用。
切換開關可以使用 toggle-assertive 來指定顏色。

<label class="toggle">
   <input type="checkbox">
   <div class="track">
     <div class="handle"></div>
   </div>
</label>

 

該實例有是多個切換開關列表。注意，每個選項的 item 類後需要添加 item-toggle 類。

<ul class="list">

  <li class="item item-toggle">
     HTML5
     <label class="toggle toggle-assertive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

  ...

</ul>

 



三、ionic checkbox（複選框）

ionic 裏面的 Checkbox 和普通的 Checkbox 效果上其實相差不大，只是樣式上有所不同。
以下實例顏色了多個複選框的列表。
注意，每個選項的 item 類後需要添加 item-checkbox 類。
複選框可以使用 checkbox-assertive 來指定顏色。

<ul class="list">

  <li class="item item-checkbox">
     <label class="checkbox">
       <input type="checkbox">
     </label>
     Flux Capacitor
  </li>

  ...

</ul>

 



四、ionic 單選框

ionic 當選按鈕與標準 type="radio" 的 input元素類似。以下展示了現代app類型的單選按鈕。
每個 item-radio 中的 type="radio" 的 input 元素的 name 屬性都相同。radio-icon 類用於是否顯示圖標。
ionic 在單選項中使用了 元素，使其更易點擊。
實例

<div class="list">

<label class="item item-radio">
  <input type="radio" name="group" value="go" checked="checked">
  <div class="item-content">
    Go
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="python">
  <div class="item-content">
    Python
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="ruby">
  <div class="item-content">
    Ruby
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value=".net">
  <div class="item-content">
    .Net
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="java">
  <div class="item-content">
    Java
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="php">
  <div class="item-content">
    PHP
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

</div>

 



五、ionic Range

ionic Range 是一個滑塊控件，ionic 爲 Range 提供了很多種默認的樣式。而且你可以在許多種元素裏使用它比如列表或者 Card 。

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

<div class="list" style="margin-top: 13px">
  <div class="item item-divider">
    Ranges In A List
  </div>
  <div class="item range range-positive">
    <i class="icon ion-ios-sunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="12">
    <i class="icon ion-ios-sunny"></i>
  </div>
  <div class="item range range-calm">
    <i class="icon ion-ios-lightbulb-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="25">
    <i class="icon ion-ios-lightbulb"></i>
  </div>
  <div class="item range range-balanced">
    <i class="icon ion-ios-bolt-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="38">
    <i class="icon ion-ios-bolt"></i>
  </div>
  <div class="item range range-energized">
    <i class="icon ion-ios-moon-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="50">
    <i class="icon ion-ios-moon"></i>
  </div>
  <div class="item range range-assertive">
    <i class="icon ion-ios-partlysunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="63">
    <i class="icon ion-ios-partlysunny"></i>
  </div>
  <div class="item range range-royal">
    <i class="icon ion-ios-rainy-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="75">
    <i class="icon ion-ios-rainy"></i>
  </div>
  <div class="item range range-dark">
    <i class="icon ion-ios-lightbulb-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="88">
    <i class="icon ion-ios-lightbulb"></i>
  </div>
</div>

 



六、ionic select

ionic select 的 select 相比原生的要更加美觀些。但是彈出的可選選項樣式是瀏覽器默認的。
每個平臺上的可選項樣式都是不一樣的，在PC電腦的瀏覽器上，你會看到傳統的下拉界面，Android 上會彈出單選按鈕選項，iOS 有個滾輪操作界面。

<div class="list">

  <div class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected="">Green</option>
      <option>Red</option>
    </select>
  </div>

  <div class="item item-input item-select">
    <div class="input-label">
      Fighter
    </div>
    <select>
      <option>ARC-170</option>
      <option>A-wing</option>
      <option>Delta-7</option>
      <option>Naboo N-1</option>
      <option>TIE</option>
      <option selected="">X-wing</option>
      <option>Y-wing</option>
    </select>
  </div>

  <div class="item item-input item-select">
    <div class="input-label">
      Droid
    </div>
    <select>
      <option>2-1B</option>
      <option>B1</option>
      <option>C-3PO</option>
      <option>IG-88</option>
      <option>IT-O</option>
      <option selected="">R2-D2</option>
    </select>
  </div>

  <div class="item item-input item-select">
    <div class="input-label">
      Planet
    </div>
    <select>
      <option>Alderaan</option>
      <option selected="">Dagobah</option>
      <option>Felucia</option>
      <option>Geonosis </option>
      <option>Hoth</option>
      <option>Kamino</option>
      <option>Mygeeto</option>
      <option>Naboo</option>
      <option>Tataouine</option>
      <option>Utapau</option>
      <option>Yavin</option>
    </select>
  </div>

</div>

 



摘抄：http://www.cnblogs.com/quickcodes/p/Ionic-ru-men-wu-biao-dan.html