Можно ли изменить цвет ложного состояния mdSwitch углового материала?

Question

Угловой материал md-switch Удивительная директива. Поскольку я не могу найти что-то относительное в документации или вообще в Интернете, мне было интересно, возможно ли изменить фон директивы, когда находится в ложном состоянии.

Как вы можете видеть в ссылке выше, md-switch может иметь цвет, когда он находится в истинном/активном состоянии. Вы можете просто установить это с помощью инструкции класса или ng-класса.

Мне хотелось бы иметь два цвета, допустим, md-primary, когда моя область действия истинна и md-warn, когда это происходит.

Например:

<md-switch ng-model="status" aria-label="Status" ng-class="{'md-primary': status === true, 'md-warn': status === false}"></md-switch> 

Но это не работает.

Любые идеи, если что-то может сделать это без переопределения вручную CSS?

пс: статус меняется нет никакой проблемы;)

Answer 1

Это довольно просто, на самом деле:

/* 
* The bar: 
*/ 

md-switch .md-bar { 
    background-color: #333; /* set not selected bar color */ 
} 

md-switch.md-checked .md-bar { 
    background-color: pink; /* set selected bar color */ 
} 

md-switch[disabled] .md-bar { 
    background-color: rgba(51, 51, 51, .15); /* set disabled bar color */ 
} 

/* 
* The switch: 
*/ 

md-switch .md-thumb { 
    color: rgb(158,158,158); /* not selected switch color */ 
} 

md-switch.md-checked .md-thumb { 
    background-color: rgb(255,255,255); /* selected switch color */ 
} 

md-switch[disabled] .md-thumb { 
    background-color: rgb(255,255,255); /* disabled switch color */ 
} 

/* 
* Ripple effect 
*/ 

md-switch .md-ink-ripple { 
    color: rgb(255,0,0); /* not selected switch ripple color */ 
} 
md-switch.md-checked .md-ink-ripple { 
    color: rgb(92,184,92); /* selected switch ripple color */ 
} 

---

Обновленный ответ с слабейших CSS селекторов в стиле md-switch состояний Угловое Материал (проверен на последнюю версию: 1.0.0-rc7).

Если вы хотите, чтобы это было зависимым от темы, им нужно было бы добавить селектор CSS темы по каждому из вышеперечисленных (если вы задаете тему «угловой» способ, класс относится к каждому элементу углового материала) :

md-switch[disabled].my-custom-theme .md-bar {...}