3

Ionic 内でカスタマイズしようとして<ion-toggle>いますが、css でのトグル選択の問題に直面しています。私は2つ持って<ion-toggle>おり、CSSでそれらを設計すると、両方ともカスタマイズされます:それは正しいです。両方の異なるカスタムを提供したい場合に問題が発生します! それらに class="xxx" を配置して、個別にカスタマイズできるようにする方法が見つかりませんでした。

それらを超えて<ion-toggle>、CSSで設計したいクラスがあります

// .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>誰かがこれらのクラスを多くの sから切り離す方法を知っています<ion-toggle>か?

4

4 に答える 4

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;
}
于 2015-12-02T11:36:12.270 に答える
-1

クラスを分離するのではなく、それらのクラスをカスタム css でオーバーライドすることをお勧めします。DOM を調べて、オーバーライドする特定のクラスと css プロパティを確認します。

于 2015-12-01T16:51:09.583 に答える