如何在离子框架中为ios制作复选框？

Question

离子复选框在Android中显示方块，但在 IOS 中显示为圆形。

我们如何让它们成为IOS的正方形？

Answer 1

在复选框类中使用checkbox-square系统defind css class。

<ion-checkbox class="checkbox-square" ng-model="isCheckedCommercial">value 1</ion-checkbox>

这会对你有所帮助。 如果您有任何疑问，请告诉我。

Answer 2

您可以全局设置： $ ionicConfigProvider.form.checkbox（ “圆圈”）;

angular.module('app', ['ionic', ...])
.config(function($ionicConfigProvider) {
  $ionicConfigProvider.form.checkbox("square");
  //code
})

更多信息：here

Answer 3

我只是用这个。

<ion-checkbox mode="md"></ion-checkbox>

Answer 4

原生iOS使用switches。 Ionic尝试使用类似本机控件的组件。这次不太成功，但也许圈子更接近原生iOS的感觉。所以我坚持下去：使用离子手段也可以遵循他们的设计。

Answer 5

将此添加到您的scss文件。

.checkbox-icon {
        border-radius: 0%!important
}

Answer 6

更改checkbox-md将解决此问题。 在您的html文件集中， class =“ checkbox-md”

Answer 7

以下代码适用于Ionic版本3：

.item {
      .checkbox {
        .checkbox-icon {
          border-radius: 0% !important;
        }
      }
    }