Ionic ion-header-bar、bar-subheader、ion-tabs

来源：互联网发布：网络喷子编辑：程序博客网时间：2024/04/30 03:38
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title></title>    <link href="lib/ionic/css/ionic.min.css" rel="stylesheet">    <script src="lib/ionic/js/angular/angular.js"></script>    <script src="lib/ionic/js/ionic.bundle.min.js"></script>    <script type="text/javascript">        angular.module('ionicApp', ['ionic'])    </script></head><body ng-app="ionicApp">    <!--header 方式1-->    <ion-header-bar class="bar bar-header bar-light bar-calm">        <a href="#/app/capture" class="button button-icon icon ion-gear-a"></a>        <ion-title class="bar-calm">腾讯新闻</ion-title>        <a href="#/app/playlists" class="button button-icon icon ion-heart"></a>    </ion-header-bar>    <!--header 方式2-->    <div class="bar bar-header  bar-royal">        <a href="#/app/capture" class="button button-icon icon ion-gear-a"></a>        <h1 class="title">腾讯新闻</h1>        <a href="#/app/playlists" class="button button-icon icon ion-heart"></a>    </div>    <!--subheader 方式1-->    <ion-header-bar class="bar-subheader bar-positive">        <h2 class="title">Sub Header!</h2>        <a href="#/app/playlists" class="button button-icon icon ion-ios7-undo-outline"></a>        <a href="#/app/capture" class="button button-icon icon ion-ios7-redo-outline"></a>    </ion-header-bar>    <!--subheader 方式2-->    <!--<div class="bar bar-subheader">        <h2 class="title">Sub Header</h2>        <a href="#/app/playlists" class="button button-icon icon ion-ios7-undo-outline"></a>        <a href="#/app/capture" class="button button-icon icon ion-ios7-redo-outline"></a>    </div>-->    <ion-content>    </ion-content>    <!--<ion-footer-bar class="bar-balanced">    </ion-footer-bar>-->    <!--<div class="bar bar-footer bar-balanced">        <button class="button button-clear">Left</button>        <div class="title">            <button class="button button-clear button-icon icon ion-ios7-videocam-outline"></button>        </div>        <button class="button button-clear">Right</button>    </div>-->    <!--文字选项卡-->    <!--<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>-->    <ion-tabs class="tabs-icon-top tabs-color-active-positive">        <!-- Dashboard Tab -->        <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">            <ion-nav-view name="tab-dash"></ion-nav-view>        </ion-tab>        <!-- Chats Tab -->        <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">            <ion-nav-view name="tab-chats"></ion-nav-view>        </ion-tab>        <!-- Account Tab -->        <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">            <ion-nav-view name="tab-account"></ion-nav-view>        </ion-tab>    </ion-tabs></body></html>
效果图：
0 0