首页技术文章正文

Ionic中文本选项卡怎样使用？

更新时间:2022年03月15日11时05分来源:传智教育浏览次数:

选项卡是一个可以包含多个按钮或链接的容器，通常用于实现导航功能。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>联系人</b>
   </a>
   <a class="tab-item disabled">
          <b>动态</b>
   </a>
</div>
</body>
</html>

在上述代码中，使用.tabs-stable和.tabs-color-dark类设置选项卡的背景色和文本颜色，使用.active和.disable类设置选项卡的活动和非活动状态，使用.tab-item-balanced类设置活动项文字的颜色;选项卡默认显示在页面的底部。使用Chrome浏览器访问demo9-21.html,页面效果如图9-33所示。

在图9-33中，可以通过文字的颜色区别活动和非活动状态的选项卡。为了更加直观地区别活动项，ionic中提供了指示条功能，即使用，tabs-striped类为活动选项添加指示条。

在demo9-21.html的第10行代码中，引入.tabs-striped 类，重新访问该页面，页面效果如下图所示。