NativeScript/Angular - Как стилизовать проверенное состояние на переключателе при использовании ngModel/FormBuilder?

Question

Рассмотрим этот переключатель:

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

Если я сделаю это, он будет работать только тогда, когда вы еще не активировали переключатель, после этого цвет фона всегда будет таким же, даже если переключатель не активен:

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

И если я сделаю это:

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

Тогда фон всегда будет одинаковым независимо от состояния.

Как правильно стилизовать переключатель при использовании его с привязками модели angular?

Answer 1

Я разрабатываю приложение, и это я бы сделал.

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

И это мой XML:

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

Надеюсь, это поможет!

Answer 2

У меня была проблема с выключателем

фоновый цвет

и это не сработало, как ожидалось. Изменение цвета фона меняло весь переключатель (серая часть). Поэтому мне пришлось изменить только свойство цвета:

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

Answer 3

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

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

В вашем шаблоне

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

В вашем компоненте

isChecked:boolean;

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