ionic中 .tab-item : 使用徽章
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
微信（wechat）的选项卡中第三项包含了一个红色的信息元素，被称为徽章：
要在.tab-item内包含徽章，需要注意两点：
使用.badge样式插入徽章元素
在.tab-item同级声明.has-badge样式
<any class="tabs"> <any class="tab-item has-badge"> <any class="badge">...</any> </any> ...</any>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body class="stable-bg">
<div class="bar bar-header bar-dark">
<h1 class="title">微信</h1>
<a class="button button-clear icon ion-ios-plus-empty"></a>
</div>
<div class="tabs tabs-dark tabs-icon-top">
<a class="tab-item active">
<i class="icon ion-ios-chatbubble-outline"></i>微信
</a>
<a class="tab-item">
<i class="icon ion-ios-paper-outline"></i>通信录
</a>
<a class="tab-item has-badge">
<i class="icon ion-ios-eye-outline"></i>发现
<i class="badge">12</i>
</a>
<a class="tab-item">
<i class="icon ion-ios-person-outline"></i>我
</a>
</div>
</body>
</html>