ion-toggle ：减小切换按钮的大小

Question

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

Answer 1

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

.toggle-icon: width和height改变toggle的大小"track"
.toggle-inner: width 和 height 改变在 track
.toggle-checked .toggle-inner.: transform: translate3d(27px, 0, 0) 第一个参数在按下时改变按钮的位置

Answer 2

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

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

使用 .toggle .track class 调整以下 css 属性：

width: 51px;
height: 31px;

然后 .toggle .handle 调整以下 css 属性：

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

您也可以添加自己的 class 名称来更改特定切换按钮的外观。

如果您使用 ion-toggle 指令，如

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

您可以尝试查看应用 class="toggle-small" 是否会根据您的需要改变外观。但是，上述 class 修改仍可应用于此指令。

Answer 3

试试这个

ion-toggle {
  zoom: 0.8;
}

Answer 4

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

CSS 上面建议的缩放似乎已过时 2017 post 在我的日历中并没有那么旧。无论如何，它不需要虚拟单位。

虽然我一直在与所有这些无意义的框架和 CSS 神秘的行话作斗争，但我一直在尝试使用虚拟单位，即使是字体大小。因为它们是平台呈现的不动产的百分比，所以我觉得它们通过单一规格提供更好的结果，偶尔我会分别指定纵向和横向。

因此，对于切换，我从您的所有输入和其他 post 中得出以下集合。为了有一个体面的外观，我倾向于喜欢大的东西，但它们仍然必须适合 iphone、android 和我的电视 1920 x 1000

我个人认为继续用 px、em 等奇怪的单位说话和指定 CSS 是完全愚蠢的....

这是 iphone 的外观

这是我大电视上的样子

如您所见，我还需要为我的 1920 x 1080 电视上很小的单选按钮做一些样式设置。我将推导出一种适用于两者的通用样式（与 Ionic 默认值不同，它不会，否则我们不会在这里，对吗？）。

程序员不应该这样做，遗憾的是框架让它变得如此痛苦，当他们声称做相反的事情（使你能够在各种平台上发布）时。

感谢@amuramoto 的翻译，我只是在通过开发工具破解所有这些可怕的混乱。

这是我为单选按钮制作的东西我不知道为什么我必须使用 5.5vmin 来使 .radio-icon 居中？它在 iphone 上看起来还不太好。也许有人可以对此进行改进？

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

ion-toggle : Reduce size of toggle button