ion-Knebel : Reduzieren Sie die Größe der Schaltfläche zum Umschalten

In den Fall, Sie erstellen toggle-button wie dieser:

<label class="toggle">
   <input type="checkbox">
   <div class="track">
     <div class="handle"></div>
   </div>
</label>

Verwenden .toggle .track Klasse zu passen folgende css-Eigenschaften:

width: 51px;
height: 31px;

dann .toggle .handle zu passen folgende css-Eigenschaften:

width: 20px;
height: 20px;
border-radius: 20px;
top: 7px;
left: 7px;

Können Sie auch Ihre eigenen class-Namen ändern Sie das Aussehen von bestimmten Tasten.

Falls Sie mit ion-toggle Richtlinie wie in

<ion-toggle ng-model="airplaneMode" class="toggle-small" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

Können Sie versuchen, um zu sehen, ob die Anwendung class="toggle-small" verändert sein Aussehen, je nach Ihrem Bedarf. Jedoch, vor der Klasse Modifikationen, die angewendet werden können, um dieser Richtlinie.

Was ich sagen kann, benötigen Sie zum anpassen der drei CSS-Definitionen: .toggle-Symbol .toggle-innere, und .toggle-geprüft .toggle-innere.

• .toggle-Symbol: Breite und Höhe ändert die Größe des toggle "track"
• .toggle-innen: - Breite und Höhe ändert die Größe des toggle-button", dass die Folien in der Spur
• .toggle-geprüft .toggle-innen.: transform: translate3d(27px, 0, 0) Der erste arg ändert die position der Schaltfläche, wenn Sie gedrückt wird