Ionic集成segment

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