教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

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 类,重新访问该页面,页面效果如下图所示。

从图中的页面效果可以看出,指示条和活动选项卡的字体颜色一致,单独为活动选项设置的字体颜色没有生效;也就是说,选项卡指示条和活动选项单独字体颜色的功能只能选择一个,不能同时使用。



猜你喜欢:

CSS层叠性和继承性的概念有什么不同

CSS3子代选择器和兄弟选择器的用法

css link和@import的区别是什么?

CSS如何去除图片间隙?【CSS教程】

传智教育HTML&JS+前端开发培训课程

0 分享到:
和我们在线交谈!