您的位置：首页 > 其它

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

2016-12-30 09:53 381 查看 
<!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>


效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ion-header-bar bar-subheader ion-tabs
相关文章推荐
新的分享
章节导航