ionic-CSS:ionic 表單和輸入框
阿新 • • 發佈:2018-05-07
輸入框 hit col 標簽 字段 head wid AS wrapper
1、
1、
http://www.runoob.com/ionic/ionic-form-input.html
2、
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="[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>
嘗試一下 ?
2、2.返回頂部 |
3.返回頂部 |
4.返回頂部 |
5.返回頂部 |
6.返回頂部 |
作者:ylbtech 出處:http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。 |
ionic-CSS:ionic 表單和輸入框