CODEWITHSUNDEEP
cssangularnativescriptnativescript-angular
Chrillewoodz
Chrillewoodz

Reputation: 28368

NativeScript/Angular - How to style checked state on a switch when using ngModel/FormBuilder?

Consider this switch:

<Switch class="switch" formControlName="answer"></Switch>

If I do this it only works when you haven't activated the switch yet, after that the background-color will always be the same even when the switch is not active:

.switch[checked=true] {
  background-color: #FE4A49;
  color: #FE4A49;
}

And if I do this:

.switch {
  background-color: #FE4A49;
  color: #FE4A49;
}

Then the background will always be the same regardless of the state.

What's the correct way of styling a switch when using it with angular's model bindings?

Upvotes: 4

Views: 3014

Answers (4)

Ricky Levi
Ricky Levi

Reputation: 8007

My SCSS in NS [email protected] is like:

Switch {
 background-color: ligten(gray, 40%);
 color: gray;
}

Switch:checked {
    background-color: ligten(blue, 40%);
    color: blue;
}

Not [checked=true]

Upvotes: 0

madsongr
madsongr

Reputation: 785

I had an issue with switch

background-color

and it was not working as expected. Changing the background-color was changing the whole switch (the gray part). So I had to change only the color property:

Switch[checked=true] {
    color: #f68533;
}

Upvotes: 2

Donny Vasquez Ramos
Donny Vasquez Ramos

Reputation: 91

i'm styling an App and this is i'd do.

CSS:

Switch#userStatus[checked=true]{
  color:#ff0048 ;
  background-color: white;
  transform: scale(1.25, 1.25); // This is for change the size when checked
  transform: translate(-5,0); // This is for stay the position after scale it
}

Switch#userStatus[checked=false]{
  color: gray;
  background-color: gray;
}

And this is my XML:

`<Switch id="userStatus" checked="false" />`

I hope this helps!

Upvotes: 9

GUISSOUMA Issam
GUISSOUMA Issam

Reputation: 2582

.switch-notchecked {
    background-color: #FE4A49;
    color: yellow;
}

.switch-checked {
    background-color: blue;
    color: green;
}

In your template

<Switch #sw checked="false" (checkedChange)="switchChanged(sw.checked)" [class]="isChecked?'switch-checked':'switch-notchecked'"></Switch>

In your component

isChecked:boolean;

 switchChanged(checked) {
        this.isChecked = checked;
    }

Upvotes: 0

Related Questions