教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢(xún)/投訴熱線：400-618-4000

Ionic中文本選項(xiàng)卡怎樣使用？

更新時(shí)間:2022年03月15日11時(shí)05分 來(lái)源:傳智教育 瀏覽次數(shù):

選項(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瀏覽器訪問(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)，重新訪問(wèn)該頁(yè)面，頁(yè)面效果如下圖所示。

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



猜你喜歡：

CSS層疊性和繼承性的概念有什么不同

CSS3子代選擇器和兄弟選擇器的用法

css link和@import的區(qū)別是什么?

CSS如何去除圖片間隙？【CSS教程】

傳智教育HTML&JS+前端開(kāi)發(fā)培訓(xùn)課程

0 分享到：
和我們?cè)诰€交談！