Ionic中怎樣設置文本選項卡？

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

選項卡是一個可以包含多個按鈕或鏈接的容器，通常用于實現(xiàn)導航功能。ionic中使用.tabs類聲明選項卡，使用.tab-item類聲明選項卡成員，其中文本選項卡中默認只包含文字內容，接下來通過一個案例來演示文本選項卡的使用方法，如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>文本選項卡</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>動態(tài)</b>
   </a>
</div>
</body>
</html>

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

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

在demo9-21.html的第10行代碼中，引入.tabs-striped 類，重新訪問該頁面，頁面效果如下圖所示。

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