角度多個MD主題風格

我有一個空白頁（基本設置），如下：

HTML：

<html lang="en" > 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">  
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
</head> 
<body ng-app="BlankApp" ng-cloak> 

<!-- No Content --> 

<!-- Angular Material Dependencies --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</body> 
</html>

JS：

var app = angular.module('BlankApp', ['ngMaterial']);

非常基本的。

當我檢查的元素，我得到如下多個me-theme-style：

我剛開始angularjs，我不知道如果我做錯了什麼。

任何建議將不勝感激！

謝謝！

來源

2016-10-17 steve Kim

角度就像一個瘋狂的卡通多工具，配備冰箱和割草機，但有時您只需要一塊錫紙。另一個答案在這裏雖然很有幫助，但談論解決方案卻沒有深入到問題的核心，這在我看來正在幫助OP關閉重複。

Direct from the angular material docs

懶生成主題

默認情況下，定義時生成的每個主題。您可以使用$mdThemingProvider

angular.module('myApp', ['ngMaterial']) 
    .config(function($mdThemingProvider) { 
     //disable theme generation 
     $mdThemingProvider.generateThemesOnDemand(true); 
    });

下面是我用確切的語法在配置部分禁用它，和它的工作就像一個冠軍。（需要注意的是，這並沒有爲我們打破任何風格）：

.config(['$mdThemingProvider', function($mdThemingProvider) { 
    $mdThemingProvider.generateThemesOnDemand(true); 
}])

來源

2017-05-04 15:51:12 Kraken

這不是一個問題angularjs實際上，既不angular-material。這是angular-material以編程方式生成應用程序主題的方式。在這種情況下，它是默認主題，但如果使用angular-material配置指定一個主題，則會生成您的自定義主題，而不是默認主題。

最後，它只是一個功能，讓你做這樣的事情從應用像這樣創建你的主題：

angular.module('myApp', ['ngMaterial']) 
    .config(function($mdThemingProvider) { 

     $mdThemingProvider.theme('default') 
      .primaryPalette('pink') 
      .accentPalette('orange'); 
    });

來源

2016-10-18 01:41:42

按照你應該使用標準，主題概念，如果你正在使用材料角js。這是整個想法。

默認情況下，您的角度材質的應用程序將使用默認的主題，一個主題，這是預配置的意向羣體的調色板如下：

小學 - 靛藍口音 - 粉紅色警告 - 紅色背景 - 灰色（注意，白色在此調色板中）配置默認主題是通過在應用程序配置期間使用$ mdThemingProvider完成的。

您可以通過調用相應的配置方法（theme.primaryPalette，theme.accentPalette，theme.warnPalette，theme.backgroundPalette）爲給定的顏色意圖指定調色板。

就像從材料角度的官方網站：

 angular.module('myApp', ['ngMaterial']) 
.config(function($mdThemingProvider) { 

    $mdThemingProvider.theme('default') 
    .primaryPalette('pink', { 
     'default': '400', // by default use shade 400 from the pink palette for primary intentions 
     'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class 
     'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class 
     'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class 
    }) 
    // If you specify less than all of the keys, it will inherit from the 
    // default shades 
    .accentPalette('purple', { 
     'default': '200' // use shade 200 for default, and keep all other shades the same 
    }); 
});

相信我，你會在你的代碼得到更好的潤滑。只需按照以下步驟操作：

來源

2016-10-18 04:15:10 Jigar7521

角度多個MD主題風格

回答

相關問題