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>
嘗試一下 ?