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

Question

有没有办法减少离子切换按钮的大小.图片描绘了我的问题.

Answer 1

试试这个

ion-toggle {
  zoom: 0.8;
}

Answer 2

如果您要创建这样的切换按钮：

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

使用.toggle .trackclass 来调整以下 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"根据您的需要改变外观。但是，上述类修改仍然可以应用于该指令。