ionic-framework - ionic 切换 : Reduce size of toggle button

Question

有什么办法可以减小 ionic 切换按钮的大小。
图片描述了我的问题。

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"根据您的需要更改外观。但是，上述类修改仍然可以应用于该指令。