ionic CSS中單選按鈕的用法

更新時間:2022-03-14 來源:黑馬程序員瀏覽量:

IT培訓(xùn)班

onic單選按鈕是基于HTML的input[type="radio"]實(shí)現(xiàn)的。單選按鈕的可視部件包括兩部分：選中圖標(biāo)(.radio-icon)和描述內(nèi)容(.itemcontent)，可以在引用.item-content類的元素中添加文字，如下圖所示。

1647241981077_滑動手柄.jpg

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)。單選按鈕通常不單獨(dú)使用，而是在一個列表中組合使用，結(jié)構(gòu)如下。

<any class="list">
   <any class="item item-radio">...</any>
   <any class="item item-radio">...</any>
   ...
</any>

需要注意的是，radio控件的name屬性值決定了單選按鈕的分組，所以對于互斥的選擇項(xiàng)，必須將它們的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è)置三個表單控件的默認(rèn)選中效果。值得一提的是，兩個互斥的單選按鈕的name值是相同的。

1647241549537_單選按鈕.jpg