Ion-Toggle: Größe der Umschalttaste reduzieren

Question

Gibt es eine Möglichkeit, die Größe der Ion-Toggle-Taste zu reduzieren. Das Bild zeigt mein Problem.

Answer 1

bei gedrückt wird Sie Umschaltknopf wie folgt erstellen:

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

Verwenden .toggle .track Klasse folgende CSS-Eigenschaften einzustellen:

width: 51px; 
height: 31px; 

und dann .toggle .handle Eigenschaften folgende CSS anpassen:

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

Sie können auch Ihre eigenen Klassennamen hinzufügen Auftreten spezifischer Umschaltflächen sich ändern .

Falls Sie verwenden ion-toggle Richtlinie wie in

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

Sie können versuchen, zu sehen, ob class="toggle-small" Aussehen nach Ihrem Bedarf ändert die Anwendung. Die obigen Klassenänderungen können jedoch weiterhin auf diese Richtlinie angewendet werden.

Answer 2

Von dem, was ich sagen kann, müssen Sie drei CSS-Definitionen anpassen: .Toggle-Icon, .Toggle-Inner und .Toggle-Checked .Toggle-Inner.

• .toggle-Symbol: Breite und Höhe die Größe des Toggle „Spur“ ändern
• .toggle-Innen: Breite und Höhe die Größe des Toggle „Knopf“ ändern, die in der Spur gleitet
• .toggle-geprüft .toggle-Innen .: verwandeln: translate3d (27px, 0, 0) die erste arg ändert sich die Position der Taste, wenn es

Answer 3

versuchen diese

ion-toggle { 
    zoom: 0.8; 
}