首頁技術(shù)文章正文

ionic CSS中單選按鈕的用法

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

IT培訓(xùn)班


onic單選按鈕是基于HTML的input[type="radio"]實現(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)。單選按鈕通常不單獨使用,而是在一個列表中組合使用,結(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值是相同的。

1647241549537_單選按鈕.jpg


使用Chrome 瀏覽器訪問 demo9-19.html,頁面效果如圖9-26所示。

從圖9-26中可以看出,復(fù)選框的“鈴聲”為默認選中項,“通知”的開關(guān)為開啟(checked)狀態(tài),單選按鈕中的“女”為選中項。






猜你喜歡:

CSS如何裝飾文本、定義文本屬性?

box-sizing的屬性及作用詳細介紹【CSS3】

Ionic中怎樣設(shè)置文本選項卡?

CSS怎樣更換鼠標(biāo)樣式?

黑馬程序員web前端開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!