Ionic项目中要用到segment，官方在2.0的版本中有提供，但1.3的版本下没有，只有buttons列表，在GitHub上找了一下，找到一个ti-segmented-control,GitHub,因为ionic-material改掉了nav-bar的样式，所以在这里面又改了一下css样式
首先，安装
$ bower install ti-segmented-control
接下来在index.html中加入
<!-- segment -->
<script src="lib/ti-segmented-control/dist/ti-segmented-control.js"></script>
在app.js中加入
angular.module('starter', ['ionic', 'ionic-material', 'starter.controllers', 'starter.services', ....,'ti-segmented-control'])
在ion-nav-title中加入
<ion-nav-title>
<ti-segmented-control on-select="buttonClicked($index)">
<ti-segmented-control-button class="button-positive" title="'汇总'"></ti-segmented-control-button>
<ti-segmented-control-button class="button-positive" title="'项目汇总'" selected></ti-segmented-control-button>
</ti-segmented-control>
</ion-nav-title>
最后改一下css样式
.bar .button{
max-width: 100%;
box-shadow: 0 0 0 0;
}
.button-bar{
padding-top: 10px;
box-shadow:0 0 0 0;
}
.button.button-positive.button-outline{
background: white;
line-height: 25px;
font-weight: bold;
font-size: 16px;
}
好了，最后效果如下
屏幕快照 2016-10-09 下午2.07.53.png
