【代码笔记】Web-ionic tab(选项卡)

一，效果图。

二，代码。

复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
    <script src="js/app2.js"></script>
    <script src="cordova.js"></script>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>

<body>
    <!--实例-->
    <div class="tabs">
        <a class="tab-item">
    主页
</a>
        <a class="tab-item">
    收藏
    </a>
        <a class="tab-item">设置</a>
    </div>

   <!--图标选项卡-->
<div class="tabs tabs-icon-only">
    <a class="tab-item">
<i class="icon ion-home"></i>
    </a>
    <a class="tab-item">
<i class="icon ion-star"></i>

    </a>
    <a class="tab-item">
<i class="icon ion-gear-a"></i>
    </a>
</div>

 <!--顶部图标加文字选项卡-->
<div class="tabs tabs-icon-top">
    <a class="tab-item" href="#">
        <i class="icon ion-home"></i>
        主页
    </a>
    <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        收藏
    </a>
    <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        设置
    </a>
</div>

 <!--左侧图标加文字选项卡-->
 <div class="tabs tabs-icon-left">
    <a class="tab-item">
        <i class="icon ion-home"></i>
        主页
    </a>
    <a class="tab-item">
        <i class="icon ion-star"></i>
        收藏
    </a>
    <a class="tab-item">
        <i class="icon ion-gear-a"></i>
        设置
    </a>
 </div>


<!--条纹样式选项卡-->
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
        <a class="tab-item active" href="#">
            <i class="icon ion-home"></i> Test
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-star"></i> Favorites
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-gear-a"></i> Settings
        </a>
    </div>
</div>










</body>

</html>
复制代码

 

参考资料：《菜鸟教程》

posted @ 2018-07-30 09:32  花儿迎风笑  阅读(422)  评论(0)  编辑  收藏  举报