CODEWITHSUNDEEP
angularjsangular-material
opendave
opendave

Reputation: 53

Gradients with Angular Material md-colors directive

I'm wondering if there is any way to do gradients using the Angular Material md-colors directive?

https://material.angularjs.org/1.1.1/api/directive/mdColors

Thanks

Upvotes: 3

Views: 3057

Answers (1)

camden_kid
camden_kid

Reputation: 12813

It doesn't seem possible with the md-colors directive but you can do it programatically - CodePen

Markup

<div ng-controller="AppCtrl as ctrl" ng-cloak="" ng-app="MyApp" layout-fill layout-padding layout="column">
  <div style="background: linear-gradient({{ctrl.color1}}, {{ctrl.color2}})" flex></div>
</div>

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function($mdColors) {
  this.color1 = $mdColors.getThemeColor('primary-600');
  this.color2 = $mdColors.getThemeColor('primary-100');
});

Note that this won't work with IE. From the docs:

enter image description here

Upvotes: 3

Related Questions