3

在 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.xxx{border:......}，也没有.xxx{.....}。

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

4

4 回答 4

1

从离子文档中找到的解决方案

通过将 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;
}
于 2015-12-02T11:36:12.270 回答
0

HTML

将ion-toggle组件添加到 HTML 并简单地添加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 自定义属性。

深度定制

如果你想对ion-toggle组件进行深度定制，你可以使用一种叫做 HTML & CSS injection with 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
于 2022-01-06T12:11:14.067 回答
0 
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;
}
于 2017-01-27T07:16:19.200 回答
-1

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

于 2015-12-01T16:51:09.583 回答