如何让Android端Ionic 1的ion-toggle组件样式与iOS端一致？

嘿，完全不用为了这个升级到Ionic 2！我之前在Ionic 1项目里也遇到过同样的需求，有几个靠谱的解决办法，给你说说：

这是最省心的方式，利用Ionic 1自带的配置提供者，一次性让整个App里的所有<ion-toggle>都使用iOS风格的样式，不管运行在Android还是iOS设备上。

在你的App主模块的配置函数里，注入$ionicConfigProvider并设置toggle的样式：

angular.module('yourAppName', ['ionic'])
  .config(function($ionicConfigProvider) {
    // 全局指定toggle使用iOS样式
    $ionicConfigProvider.toggle.style('ios');
  });

如果只想让某几个特定的toggle用iOS样式，直接给对应的<ion-toggle>元素添加Ionic的iOS专属类即可：

<ion-toggle class="toggle-ios">hello</ion-toggle>

要是这个toggle放在<ion-item>里面，为了保证整体样式统一，也可以给父元素的<ion-item>加上item-ios类：

<ion-item class="item-ios">
  <ion-toggle class="toggle-ios">hello</ion-toggle>
</ion-item>

如果上面两种方法都没达到预期效果，还可以直接写自定义CSS来覆盖Android端的toggle样式，手动复刻iOS的视觉效果：

/* 基础toggle容器样式 */
.toggle {
  border-radius: 20px;
  height: 30px;
  width: 51px;
  background-color: #e5e5e5;
}

/* 切换手柄样式 */
.toggle .toggle-handle {
  border-radius: 50%;
  height: 26px;
  width: 26px;
  top: 2px;
  left: 2px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 激活状态下手柄的位置 */
.toggle.active .toggle-handle {
  left: 23px;
}

/* 激活状态下容器的背景色 */
.toggle.active {
  background-color: #387ef5;
}

这些方法都能帮你在不升级Ionic版本的前提下，实现iOS风格的toggle组件~

内容的提问来源于stack exchange，提问作者Chris Rae