W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
列表是一個應(yīng)用廣泛的界面元素,在所有移動app中幾乎都會使用到。
列表可以是基本文字、按鈕,開關(guān),圖標(biāo)和縮略圖等。
列表項可以是任何的HTML元素。容器元素需要list類,每個列表項需要使用item類。
ionList和ionItem可以很容易的支持各種交互方式,比如,滑動編輯,拖動排序,以及刪除項。
<ul class="list"> <li class="item"> ... </li> </ul>
我們可以使用 item-divider 類來為列表創(chuàng)建分隔符,默認(rèn)情況下,列表項以不同的背景顏色和字體加粗來區(qū)分,但你也可以很容易的定制他。
<div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> ... </div>
我們可以在列表項的左側(cè)或右側(cè)指定圖標(biāo)。
使用 item-icon-left 圖標(biāo)在左側(cè), item-icon-right 設(shè)置圖標(biāo)在右側(cè)。如果你需要在兩邊都有圖標(biāo),則兩個類都添加上即可。
以下實例中,我們在列表項中使用了 <a> 標(biāo)簽,使得每個列表項可點擊。
列表項在使用 <a>或<button> 元素時,如果右側(cè)未添加圖標(biāo),則會自動添加上箭頭號。
實例中,第一項只有左側(cè)圖標(biāo),第二項左右均有圖標(biāo),第三項有右側(cè)圖標(biāo)(還有注釋 item-note),第四項有badge(標(biāo)記)元素。
<div class="list"> <a class="item item-icon-left" href="#"> <i class="icon ion-email"></i> Check mail </a> <a class="item item-icon-left item-icon-right" href="#"> <i class="icon ion-chatbubble-working"></i> Call Ma <i class="icon ion-ios-telephone-outline"></i> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album <span class="item-note"> Grammy </span> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> </div>
使用 item-button-right 或 item-button-left 類將按鈕放在列表項中。
<div class="list"> <div class="item item-button-right"> Call Ma <button class="button button-positive"> <i class="icon ion-ios-telephone"></i> </button> </div> ... </div>
使用 item-avatar 來創(chuàng)建一個帶頭像的列表:
<div class="list"> <a class="item item-avatar" href="#"> <img src="venkman.jpg"> <h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p> </a> ... </div>
item-thumbnail-left 類用于添加左側(cè)對齊的縮略圖, item-thumbnail-right 類用于添加右側(cè)對齊的縮略圖。
<div class="list"> <a class="item item-thumbnail-left" href="#"> <img src="cover.jpg"> <h2>Pretty Hate Machine</h2> <p>Nine Inch Nails</p> </a> ... </div>
我們可以在容器當(dāng)中內(nèi)嵌列表,列表不會顯示完整的寬度。
內(nèi)嵌列表的樣式為:list list-inset,與常規(guī)列表區(qū)別是,它設(shè)置了外邊距(marign),類似于選項卡。
內(nèi)嵌列表是沒有陰影效果的,滾動時效果會更好。
<div class="list list-inset"> <div class="item"> Raiders of the Lost Ark </div> ... </div>
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: