離子切換：減小切換按鈕的大小

Question

有什麼辦法可以減小離子切換按鈕的大小。 圖片描述了我的問題。

Answer 1

它在要創建這樣的切換按鈕的情況下改變了按鈕的位置：

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

使用.toggle .track類調​​整以下CSS屬性：

width: 51px; 
height: 31px; 

，然後.toggle .handle調整以下CSS屬性：

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

您也可以添加自己的類名進行更改的具體切換按鈕的外觀。

如果您正在使用ion-toggle指令在

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

你可以嘗試看看，如果應用class="toggle-small"改變外觀根據自己的需要。但是，上述類修改仍然可以應用於此指令。

Answer 2

從我可以告訴你將需要定製三個CSS定義：.toggle圖標，.toggle內部和.toggle檢查.toggle內部。

• .toggle圖標：寬度和高度改變肘節「軌跡」的大小
• .toggle-內：寬度和高度改變切換「鍵」，在軌道上滑動的大小
• .toggle覈對.toggle-內.:變換：translate3d（27px，0，0）的第一個參數當按下

Answer 3

試試這個

ion-toggle { 
    zoom: 0.8; 
}