Ionic：如何深度定制 ion-toggle？

Posted 2023-03-16

【中文标题】Ionic：如何深度定制 ion-toggle？

【英文标题】：Ionic : how to deeply customize ion-toggle?

【发布时间】：2016-03-05 15:31:17

【问题描述】：

在 Ionic 中，我正在尝试自定义 <ion-toggle>，但我遇到了 css 中切换选择的问题。 我有 2 个<ion-toggle>，当我在 css 中设计它们时，它们都是定制的：这是正确的。如果我想给两个不同的定制，问题来了！ 我还没有找到一种方法可以将任何 class="xxx" 放在它们上，以便我单独自定义它们。

除了<ion-toggle> 我想在 css 上设计的类

// .toggle : global sensitive toggle area
// .handle : circle above the toggle area 
// .toggle input : .handle moving area
// .toggle input+.track : .handle moving area when .handle at left
// .toggle input:checked+.track : .handle moving area when .handle at right

即使我给 <ion-toggle> : <ion-toggle class"xxx"> 上课，也无法在 css 中通过 : 或 .toggle.xxxborder:...... 或 .xxx..... 选择它。

请问，有人知道如何将这些<ion-toggle> 类与许多<ion-toggle>s 分离吗？

【参考方案1】：

从ionic documentation找到的解决方案

通过将 toggle-class="xxx" 添加到：

<ion-toggle toggle-class="MyCustomClass" ng-repeat="item in settingsList" ng-model="item.checked" ng-checked="item.checked">  item.text  </ion-toggle>

CSS 示例：

.toggle-search .handle
  height: 13px!important;
  width: 13px!important;



.toggle-search input+.track 
  height: 15px;
  width: 35px;
  margin-top: 2px;

【参考方案2】：

Use this code for ionic toggle

.sign_toggle .toggle .handle
width: 45px;
height: 47px;


.sign_toggle .toggle .track
width: 97px;
height: 52px;


.sign_toggle .toggle input:checked + .track .handle 
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(51px, 0, 0);
background-color: #fff;

【参考方案3】：

html

在 HTML 中添加 ion-toggle 组件，并简单地添加属性 class 和类名：

<ion-toggle class="Awesome"></ion-toggle>

SCSS

由于ion-toggle 是一个本地 Ionic 组件，为了能够对其进行自定义，您必须在全局 SCSS 文件中添加样式。例如global.scss。如果将样式添加到组件 SCSS 文件中，它将不起作用。 所以请确保它是一个全局 SCSS 文件。

ion-toggle 

    &.Awesome 
        --background: ...;
        --background-checked: ...;
        --border-radius: ...;
        --handle-background: ...;
        --handle-background-checked: ...;
        --handle-border-radius: ...;
        --handle-box-shadow: ...;
        --handle-height: ...;
        --handle-max-height: ...;
        --handle-spacing: ...;
        --handle-transition: ...;
        --handle-width: ...;  
    

但是，并非所有内容都可以直接使用 SCSS 进行自定义。查看官方文档以了解什么可以满足您的需求。文档：Ionic - Ion Toggle - CSS Custom Properties.

深度定制

如果您想对ion-toggle 组件应用深度定制，您可以使用名为 HTML 和 CSS 注入的技巧和 javascript 和/或使用浏览器开发工具来查找您想要定制的元素和类的名称。

离子和角度规格

此答案已根据以下 Ionic 和 Angular 规范进行了测试：

Ionic CLI                     : 6.17.1
Ionic Framework               : @ionic/angular 5.8.4
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics    : 12.1.4
@angular/cli                  : 12.1.4
@ionic/angular-toolkit        : 4.0.0

【参考方案4】：

最好的做法是使用自定义 css 覆盖这些类，而不是分离类。检查 DOM 以查看要覆盖的特定类和 css 属性。