Question

是否可以使用$ mdThemingProvider定义$ mdDialog的背景颜色/阴影？

请注意：我知道你可以用纯CSS做到这一点。这个问题只涉及$ mdThemingProvider。

Answer 1

您可以定义一个扩展grey调色板的新调色板，指定900阴影的值。

    angular.module('moduleName').config(function($mdThemingProvider) {
      var redTheme = $mdThemingProvider.theme('redTheme', 'default');
      var redPalette = $mdThemingProvider.extendPalette('grey', {
        '900': '#f00'
      });
      $mdThemingProvider.definePalette('redPalette', redPalette);
      redTheme.backgroundPalette('redPalette');
    });

示例：

＆＃13;

angular.module('BackdropApp', ['ngAria', 'ngAnimate', 'ngMaterial'], function($mdThemingProvider) {
   		var redTheme = $mdThemingProvider.theme('redTheme', 'default');
  		var redPalette = $mdThemingProvider.extendPalette('grey', {
  			'900': '#f00'
  		});
  		$mdThemingProvider.definePalette('redPalette', redPalette);
  		redTheme.backgroundPalette('redPalette');
   	})

   	.run(function($rootScope, $mdDialog) {
   		$rootScope.showAlert = function() {
	   		$mdDialog.show($mdDialog.alert({
	   			content: 'A red backdrop',
	   			ok: 'OK'
	   		}));
   		};
   	});

＆＃13;

<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="BackdropApp" md-theme="redTheme">
   <md-toolbar> </md-toolbar>
  <md-button ng-click="showAlert()" class="md-raised md-primary">Show Alert</md-button>
</body>
</html>

＆＃13;

使用$ mdThemingProvider

1 个答案: