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

Posted 2023-03-16

【中文标题】ion-toggle : 减小切换按钮的大小

【英文标题】：ion-toggle : Reduce size of toggle button

【发布时间】：2016-11-16 22:33:33

【问题描述】：

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

【参考方案1】：

试试这个

ion-toggle 
  zoom: 0.8;

【讨论】：

它有效，您不必添加任何 CSS，只需在样式页面中提及这一点，就可以像魔术一样工作......谢谢

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

【参考方案3】：

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

.toggle-icon：宽高改变toggle“track”的大小 .toggle-inner：宽度和高度改变在轨道中滑动的toggle“按钮”的大小 .toggle-checked .toggle-inner.: transform: translate3d(27px, 0, 0) 第一个参数改变按钮按下时的位置

【参考方案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 分辨率的单选按钮