ionic-CSS：ionic 表單和輸入框

ylbtech-ionic-CSS：ionic 表單和輸入框

 

1.返回頂部

一、

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

嘗試一下 »

二、

2.返回頂部

 

3.返回頂部

 

4.返回頂部

 

5.返回頂部

一、

http://www.runoob.com/ionic/ionic-form-input.html

二、

 

6.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。