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 .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 3

据我所知，你需要自定义三个CSS定义：.toggle-icon，.toggle-inner和.toggle-checked .toggle-inner。

.toggle-icon：宽度和高度会更改切换“track”
.toggle-inner：宽度和高度更改在轨道中滑动的切换“按钮”的大小
.toggle-checked .toggle-inner。：transform：translate3d（27px，0,0）第一个arg在按下按钮时改变按钮的位置

Answer 4

下面显示了如何放大以便回答OP，您可以简单地使用较小的值来获得微小的切换。

上面建议的CSS缩放在我的日历中似乎已经过时了2017年，帖子还不算老。无论如何，它不需要虚拟单元。

尽管我一直在与所有这些无用的框架和CSS隐秘术语作斗争，但我一直试图使用虚拟单元，即使是字体大小也是如此。因为它们占平台展示的房地产的百分比，所以我觉得它们以单一的规格提供了更好的结果，有时我会分别为纵向和横向指定。

因此，对于切换，我从您的所有输入和其他帖子中得出了以下汇总。为了有一个不错的外观，我倾向于喜欢大的东西，但它们仍然必须适合iPhone，Android和我的1920 x 1000电视

我个人，认为一直讲话并使用px，em等奇怪单位指定CSS完全是愚蠢的。

这是iPhone上的外观

这是我大电视上的样子

如您所见，我的1920 x 1080电视上的单选按钮仍然很小，它们还有更多样式需要做。我将衍生出一种适用于这两种方式的通用样式（不同于Ionic的默认样式，它不会，否则我们不会在这里，对吧？）。

程序员不必这样做，这是一个可耻的框架，当他们声称做相反的事情时（使您可以在各种平台上进行发布），会使它很痛苦。

感谢@amuramoto的翻译，我只是通过开发工具来弄清楚所有这些可怕的烂摊子。

这是我为单选按钮准备的内容，我不知道为什么我必须使用5.5vmin来使.radio-icon居中？在iPhone上看起来还不太好。也许有人可以对此进行改进？

这是1920 x 1080分辨率上的单选按钮

Answer 5

ion-toggle {
   zoom:0.8;
}

尝试，它就像一个护身符。