Измените цвет фона переключателя angular-material без потери эффекта пульсации.

Как я могу изменить цвет кнопки переключения углового материала, не теряя эффекта пульсации?

См. кодовое перо здесь: http://codepen.io/shyambhiogade/pen/LpNGBP.

Я изменил цвет на #03A9F4, и теперь волновой эффект не работает должным образом...

Код ниже:

<div class="inset switchdemoBasicUsage" ng-controller="SwitchDemoCtrl" ng-app="MyApp">
  <md-switch class="md-primary" md-no-ink="" aria-label="Switch No Ink" ng-model="data.cb5">
    Switch (md-primary): No Ink
  </md-switch>
</div>

angular-material
person shyam_    schedule 16.09.2015    source источник
comment
просто удалите атрибут md-no-ink из md-button и измените его на ‹md-switch class=md-primary aria-label=Switch No Ink ng-model=data.cb5›   -  person ShivangiBilora    schedule 21.09.2015

Ответы (1)


arrow_upward
8
arrow_downward

Вам нужно использовать поставщика $mdThemingProvider для изменения стиля элементов.

http://plnkr.co/edit/FRwd2fmmn0byBVUKYKi9?p=preview

angular.module('MyApp', ['ngAria', 'ngAnimate', 'ngMaterial'], function($mdThemingProvider) {
  var blueTheme = $mdThemingProvider.theme('blueTheme', 'default');
  var bluePalette = $mdThemingProvider.extendPalette('blue', {
    '500': '#03A9F4'
  });
  $mdThemingProvider.definePalette('bluePalette', bluePalette);
  blueTheme.primaryPalette('bluePalette');
})

.controller('SwitchDemoCtrl', function($scope) {});
<html>
<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.css">
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.min.js"></script>
</head>
<body ng-app="MyApp" md-theme="blueTheme" ng-controller="SwitchDemoCtrl">
   <div class="inset switchdemoBasicUsage">
  
  <md-switch class="md-primary" md-no-ink="" aria-label="Switch No Ink" ng-model="data.cb5">
    Switch (md-primary): No Ink
  </md-switch>
</div>
</body>
</html>

person Mohamed El-Sayed    schedule 21.09.2015
comment
это кажется правильным способом внесения изменений, но эффект пульсации отсутствует, можете ли вы это исправить, и я отмечу это как ответ .. спасибо - person shyam_; 21.09.2015