更改角度材料开关的背景颜色而不会失去波纹效果

shyam_ 发表于 Dev

shyam_

如何在不失去波纹效果的情况下更改角度材料的切换按钮的颜色？

请在此处查看代码笔：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>

穆罕默德·赛义德（Mohamed El-Sayed）

您需要使用$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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。