Ionic : how to deeply customize ion-toggle?

Question

Within Ionic, I am trying to customize <ion-toggle> but I face an issue of toggle selection in css. I have 2 <ion-toggle> and when I design them in css they are both customized : that's correct. Issue coming if I want give both different custom ! I haven't found a way to put any class="xxx" on them allowing me to customize them separately.

Beyond they are <ion-toggle> classes I'd like to design on 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

Even if I give a class to <ion-toggle> : <ion-toggle class"xxx">, there is no way to select it in css by : nor .toggle.xxx{border:......}, neither .xxx{.....}.

Please, does somebody knows how to dissociate these <ion-toggle> classes for many <ion-toggle>s ?

score 1 · Answer 1 · answered Dec 02 '15 at 11:36

Solution found from the ionic documentation

By adding toggle-class="xxx" into :

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

CSS example :

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

}

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

score 0 · Answer 2 · answered Jan 27 '17 at 07:16

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;
}

Grinnex. · Answer 3 · 2022-01-06T12:19:52.770

HTML

Add ion-toggle component to the HTML and simply add the attribute class with a class name:

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

SCSS

Since ion-toggle is a native Ionic component in order to be able do customize it you must add the style on a global SCSS file. For example global.scss. If you add the style to a component SCSS file it won't work. So make sure it's a global SCSS file.

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: ...;  
    }
}

However not everything can be customized directly with SCSS. Check the official docs to know what can fit your needs. Documentation: Ionic - Ion Toggle - CSS Custom Properties.

Deep Customization

If you want to apply deep customization to the ion-toggle component you can use a trick called HTML & CSS injection with Javascript and/or use browser devtools in your favor to find the names of elements and classes you want to customize.

Ionic & Angular Specifications

This answer was tested on the following Ionic & Angular specifications:

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

score -1 · Answer 4 · answered Dec 01 '15 at 16:51

-1

Rather than dissociating classes the good practice would be to override those classes with custom css. Inspect DOM to see what specific classes and css properties to override.

answered Dec 01 '15 at 16:51

S.Galarneau

2,194
1
24
26

Ionic : how to deeply customize ion-toggle?

4 Answers4

HTML

SCSS

Deep Customization

Ionic & Angular Specifications