Question

在Ionic中，我正在尝试自定义<ion-toggle>，但我面临着css中切换选择的问题。我有2 <ion-toggle>，当我在css中设计它们时，它们都是自定义的：这是正确的。如果我想给出不同的习惯，问题就来了！我还没有找到一种方法将任何class =“xxx”放在它们上，允许我单独定制它们。

除了他们是我想在css上设计的<ion-toggle>个课程

// .toggle : global sensitive toggle area
// .handle : circle above the toggle area 
// .toggle input : .handle moving area
// .toggle input+.track : .handle moving area when .handle at left
// .toggle input:checked+.track : .handle moving area when .handle at right

即使我给<ion-toggle>：<ion-toggle class"xxx">上课，也无法在css中选择它：.toggle.xxx{border:......}，.xxx{.....}。

请问，是否有人知道如何为许多<ion-toggle>分离这些<ion-toggle>课程？

Answer 1

从ionic documentation

找到的解决方案

将toggle-class =“xxx”添加到：

<ion-toggle toggle-class="MyCustomClass" ng-repeat="item in settingsList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }} </ion-toggle>

CSS示例：

.toggle-search .handle{
  height: 13px!important;
  width: 13px!important;

}

.toggle-search input+.track {
  height: 15px;
  width: 35px;
  margin-top: 2px;
}

Answer 2

不是将类分离，而是使用自定义css覆盖这些类。检查DOM以查看要覆盖的特定类和css属性。

Answer 3

Use this code for ionic toggle

.sign_toggle .toggle .handle{
width: 45px;
height: 47px;
}

.sign_toggle .toggle .track{
width: 97px;
height: 52px;
}

.sign_toggle .toggle input:checked + .track .handle {
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(51px, 0, 0);
background-color: #fff;
}

离子：如何深度定制离子切换？

3 个答案: