材質角：MD-內容用不同的顏色背景

我有主題的定製在MD-角材質角：MD-內容用不同的顏色背景

$mdThemingProvider.theme('default') 
    .backgroundPalette('customPallete', { 
     'default': '200', 
     'hue-1': '300', 
     'hue-2': '500', 
     'hue-3': '700' 
});

哪裏customPallete - 是我自己定義的調色板自定義顏色。

背景顏色'200'成功應用於md-content。但我無法爲其他組件添加另一種背景顏色。例如，我想用一些數據創建另一個顏色塊。這裏的代碼

<md-content class="md-hue-3"> 
... some code here ... 
</md-content>

但背景是一樣的，顏色是「100」從backgroundPalette的默認配置。有人知道如何使用不同的背景色自定義塊使用$ mdThemingProvider？

來源

2016-09-21 user990993

您需要使用md-colors - CodePen

我曾用「紫色」作爲背景色，以說明這一點。我無法讓你的「customPallete」工作。

標記

<div layout="column" ng-cloak="" class="md-padding colorsdemoBasicUsage" ng-app="MyApp"> 
    <md-content md-colors="{background: 'default-background-hue-3'}" style="height:100px"> 
    </md-content> 
</div>

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
    .config(function ($mdThemingProvider) { 
    $mdThemingProvider.theme('default') 
     .primaryPalette('brown') 
     .accentPalette('green') 
     .backgroundPalette('purple') 
    });

https://material.angularjs.org/latest/demo/colors https://material.angularjs.org/latest/api/directive/mdColors

來源

2016-09-22 08:20:25

另一種方法是重新編譯所需要的風格：

angular 
    .module("YourModule") 
    .config(($mdThemingProvider: IThemingProvider): void => { 
     // hack new features in angular-material 
     $mdThemingProvider.registerStyles(` 
      md-content.md-THEME_NAME-theme { 
       color: '{{foreground-1}}'; 
       background-color: '{{background-color}}'; 
      } 
     `); 
    });

因此，您將能夠使用調色板中的所有「md-hue-X」！

來源

2017-02-16 17:41:19 Dmitry

材質角：MD-內容用不同的顏色背景

回答

相關問題