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中加入



在app.js中加入

angular.module('starter', ['ionic', 'ionic-material', 'starter.controllers', 'starter.services', ....,'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

你可能感兴趣的:(Ionic集成segment)