更新時間:2022-03-14 來源:黑馬程序員 瀏覽量:
onic單選按鈕是基于HTML的input[type="radio"]實現(xiàn)的。單選按鈕的可視部件包括兩部分:選中圖標(biāo)(.radio-icon)和描述內(nèi)容(.itemcontent),可以在引用.item-content類的元素中添加文字,如下圖所示。
Ionic中使用.item-radio來聲明單選按鈕容器,基本格式如下。
<any class="item-radio"> <input name="(group-name)"type="radio"> <any class="item-content">...</any> <any class="radio-icon ion-checkmark"></any> </any>
在上述代碼中,當(dāng)單選按鈕被選中時,radio控件被設(shè)置為checked,同時會顯示選中圖標(biāo)。單選按鈕通常不單獨使用,而是在一個列表中組合使用,結(jié)構(gòu)如下。
<any class="list"> <any class="item item-radio">...</any> <any class="item item-radio">...</any> ... </any>
需要注意的是,radio控件的name屬性值決定了單選按鈕的分組,所以對于互斥的選擇項,必須將它們的name屬性值設(shè)置為相同的名稱。
為了讀者有更好的理解,接下來通過一個案例來演示ionic CSS中的復(fù)選框、開關(guān)和單選按鈕的用法,如demo9-19.html所示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" name="viewport"> <title>復(fù)選框、開關(guān)、單選按鈕</title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> </head> <body> <ul> <li class="item item-divider royal-bg" href="#">復(fù)選框</li> <li class="item item- checkbox"> <label class="checkbox "> <input checked="" type="checkbox"> </input> </label> 鈴聲 </li> <li class="item item-checkbox"> <label> <input type="checkbox"> </label> 振動 </li> <li class="item item-divider royal-bg"> 開關(guān) </li> <li class="item item-toggle"> 通知 <label class="toggle toggle-positive"> <input checked="" type="checkbox"> <div> <div></div> </div> </input> </label> </li> <li class="item item-divider royal-bg">單選按鈕</li> <li class="item item-radio"> <input checked="" name="sex" type="radio"> <div> <div> 女 </div> <i class="radio-icon ion-checkmark"></i> </div> </li> <li class="item item-radio"> <input name="sex" type="radio"> <div> <div> 男 </div> <i class="radio-icon ion-checkmark"></i> </div> </li> </body> </html>
在上述代碼中,聲明了復(fù)選框、開關(guān)和單選按鈕,并且將它們放入列表中,使用列表分隔符做了標(biāo)記;其中,第14、28和36行的checked屬性用于設(shè)置三個表單控件的默認選中效果。值得一提的是,兩個互斥的單選按鈕的name值是相同的。
使用Chrome 瀏覽器訪問 demo9-19.html,頁面效果如圖9-26所示。
從圖9-26中可以看出,復(fù)選框的“鈴聲”為默認選中項,“通知”的開關(guān)為開啟(checked)狀態(tài),單選按鈕中的“女”為選中項。