在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>
课程?
答案 0 :(得分:1)
将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;
}
答案 1 :(得分:0)
不是将类分离,而是使用自定义css覆盖这些类。检查DOM以查看要覆盖的特定类和css属性。
答案 2 :(得分:0)
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;
}