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

Question

ionic 复选框 在 android 中显示为正方形，但在 IOS 中显示为圆形。

我们如何才能使它们成为 IOS 的平方？

Answer 1

在您的复选框 class.

中使用 checkbox-square system defind css class

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

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

Answer 2

您可以通过以下方式进行全局设置： $ionicConfigProvider.form.checkbox("circle");

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

更多信息：here

Answer 3

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

Answer 4

将此添加到您的 scss 文件中。

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

Answer 5

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

Answer 6

我刚用过这个

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

Answer 7

下面的代码适用于 Ionic 版本 3：

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

how to make checkboxes square for ios in ionic framework?