ionic 表單和輸入框
<small>list 類同樣可以用于 input 元素。item-input 和 item 類指定了文本框及其標(biāo)簽。
輸入框?qū)傩裕簆laceholder
以下實(shí)例中，默認(rèn)為100%寬度（左右兩側(cè)沒(méi)有邊框），并使用 placeholder 屬性設(shè)置輸入字段預(yù)期值的提示信息。</small>
<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
<small>使用 input-label 將標(biāo)簽放置于輸入框 input 的左側(cè)。</small>
<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)簽
<small>堆疊標(biāo)簽通常位于輸入框的頭部。每個(gè)選項(xiàng)使用 item-stacked-label 類指定。 每個(gè)輸入框需要指定 input-label。以下實(shí)例也使用了 placeholder 屬性來(lái)設(shè)置信息輸入提示。</small>
<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>
浮動(dòng)標(biāo)簽
<small>浮動(dòng)標(biāo)簽類似于堆疊標(biāo)簽，但浮動(dòng)標(biāo)簽有一個(gè)動(dòng)畫(huà)的效果，每個(gè)選項(xiàng)需要指定 item-floating-label 類，輸入標(biāo)簽需要指定 input-label。</small>
<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)嵌表單
<small>默認(rèn)情況下每個(gè)輸入域?qū)挾榷际?00%，但我們可以使用 list list-inset 或 card 類設(shè)置表單的內(nèi)邊距(padding)， card 類帶有陰影。</small>
<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)嵌輸入域
<small>使用 list-inset 設(shè)置內(nèi)嵌實(shí)體列表。 使用 item-input-inset 樣式可以內(nèi)嵌一個(gè)按鈕。</small>
<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)的輸入框
<small>item-input 輸入框可以很簡(jiǎn)單的添加圖標(biāo)。 圖標(biāo)可以在 <input> 前添加。</small>
<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>
頭部輸入框
<small>輸入框可放置在頭部，并可添加提交或取消按鈕。</small>
<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(切換開(kāi)關(guān))
<small>切換開(kāi)關(guān)類似與 HTML 的 checkbox 標(biāo)簽，但它更易于在移動(dòng)設(shè)備上使用。
切換開(kāi)關(guān)可以使用 toggle-assertive 來(lái)指定顏色。
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
該實(shí)例有是多個(gè)切換開(kāi)關(guān)列表。注意，每個(gè)選項(xiàng)的 item 類后需要添加 item-toggle 類。</small>
<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>
嘗試一下 ?
<small>運(yùn)行效果如下：</small>
ionic checkbox（復(fù)選框）
<small>ionic 里面的 Checkbox 和普通的 Checkbox 效果上其實(shí)相差不大，只是樣式上有所不同。
以下實(shí)例演示了多個(gè)復(fù)選框的列表。
注意，每個(gè)選項(xiàng)的 item 類后需要添加 item-checkbox 類。
復(fù)選框可以使用 checkbox-assertive 來(lái)指定顏色。</small>
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Flux Capacitor
</li>
...
</ul>
嘗試一下 ?
<small>運(yùn)行效果如下：</small>
ionic 單選框
<small>ionic 當(dāng)選按鈕與標(biāo)準(zhǔn) type="radio" 的 input元素類似。以下展示了現(xiàn)代app類型的單選按鈕。
每個(gè) item-radio 中的 type="radio" 的 input 元素的 name 屬性都相同。radio-icon 類用于是否顯示圖標(biāo)。
ionic 在單選項(xiàng)中使用了 <label> 元素，使其更易點(diǎn)擊。</small>
實(shí)例
<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>
嘗試一下 ?
<small>運(yùn)行效果如下：</small>
