All geek questions in one place

Change the background color of the angular material without losing the ripple effect

How to change the color of an angular material button without losing the ripple effect?

Please see the code here: http://codepen.io/shyambhiogade/pen/LpNGBP

I changed the color to #03A9F4and now the ripple effect is not working properly ...

Code below:

<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>
+4
source share
1 answer

To change the style of elements, you need to use $mdThemingProviderprovider.

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>
Run code
+8
source

Source: https://habr.com/ru/post/1607737/

More articles:


All Articles