离子切换：减小切换按钮的大小

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; 
}