Ionic中怎樣設(shè)置文本選項(xiàng)卡？

更新時(shí)間:2022-03-11 來(lái)源:黑馬程序員瀏覽量:

選項(xiàng)卡是一個(gè)可以包含多個(gè)按鈕或鏈接的容器，通常用于實(shí)現(xiàn)導(dǎo)航功能。ionic中使用.tabs類(lèi)聲明選項(xiàng)卡，使用.tab-item類(lèi)聲明選項(xiàng)卡成員，其中文本選項(xiàng)卡中默認(rèn)只包含文字內(nèi)容，接下來(lái)通過(guò)一個(gè)案例來(lái)演示文本選項(xiàng)卡的使用方法，如demo.html所示。

demo9-21. html
<!DOCTYPE html>
<html>
    <head>
        <meta charsetn="UTF-8">
        <meta name="viewprot" content="initial-scale=l, maximum-scale=l,
                  user-scalable=no, width=device-width">
        <title>文本選項(xiàng)卡</title>
                <link href="lib/ionic/css/ionic.css" rel="stylesheet">
                </link>
            </meta>
        </meta>
    </head>
    <body>
    <div class="tabs tabs-stable tabs-color-dark">
         <a class="tab-item active tab-item-balanced ">
       <b>消息</b>
   </a>
   <a class="tab-item ">
       <b>聯(lián)系人</b>
   </a>
   <a class="tab-item disabled">
          <b>動(dòng)態(tài)</b>
   </a>
</div>
</body>
</html>

在上述代碼中，使用.tabs-stable和.tabs-color-dark類(lèi)設(shè)置選項(xiàng)卡的背景色和文本顏色，使用.active和.disable類(lèi)設(shè)置選項(xiàng)卡的活動(dòng)和非活動(dòng)狀態(tài)，使用.tab-item-balanced類(lèi)設(shè)置活動(dòng)項(xiàng)文字的顏色;選項(xiàng)卡默認(rèn)顯示在頁(yè)面的底部。使用Chrome瀏覽器訪(fǎng)問(wèn)demo9-21.html,頁(yè)面效果如圖9-33所示。

在圖9-33中，可以通過(guò)文字的顏色區(qū)別活動(dòng)和非活動(dòng)狀態(tài)的選項(xiàng)卡。為了更加直觀地區(qū)別活動(dòng)項(xiàng)，ionic中提供了指示條功能，即使用，tabs-striped類(lèi)為活動(dòng)選項(xiàng)添加指示條。

在demo9-21.html的第10行代碼中，引入.tabs-striped 類(lèi)，重新訪(fǎng)問(wèn)該頁(yè)面，頁(yè)面效果如下圖所示。

1646994502250_聯(lián)系人消息.jpg

1646994451537_消息動(dòng)態(tài)聯(lián)系人.jpg

從圖中的頁(yè)面效果可以看出，指示條和活動(dòng)選項(xiàng)卡的字體顏色一致，單獨(dú)為活動(dòng)選項(xiàng)設(shè)置的字體顏色沒(méi)有生效;也就是說(shuō)，選項(xiàng)卡指示條和活動(dòng)選項(xiàng)單獨(dú)字體顏色的功能只能選擇一個(gè)，不能同時(shí)使用。

猜你喜歡：

Ionic開(kāi)發(fā)中怎樣自定義元素顏色？

ionic如何實(shí)現(xiàn)圖標(biāo)類(lèi)樣式？

Web前端培訓(xùn)：CSS如何實(shí)現(xiàn)文本超出部分顯示省略號(hào)

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

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

上一篇：web.js為什么改名叫做Node.js？ 下一篇：ionic CSS中單選按鈕的用法