我正在使用 Angular Material 框架开发一个纯 Material Design 应用程序。
但是,我不明白如何设置容器的背景颜色(例如,带有蓝色背景的登录表单)。我当然可以使用 CSS 来做到这一点,但我想知道是否有内置的指令/主题选项可以做到这一点。
我正在使用 Angular Material 框架开发一个纯 Material Design 应用程序。
但是,我不明白如何设置容器的背景颜色(例如,带有蓝色背景的登录表单)。我当然可以使用 CSS 来做到这一点,但我想知道是否有内置的指令/主题选项可以做到这一点。
我很确定我在文档的某个地方看到过这个,但我现在找不到它。你必须做两件不同的事情:
.backgroundPalette('indigo')
方式与设置主主题相同我已经在 0.8.1 版本的 angular-material 上检查过它,它工作正常。
如果您有任何其他问题,请随时提问。
例如:
app.config(function ($mdThemingProvider) {
$mdThemingProvider
.theme('default')
.primaryPalette('indigo')
.accentPalette('pink')
.warnPalette('red')
.backgroundPalette('blue-grey');
});
并在您的模板中:
<md-content>
<p>Some text</p>
</md-content>
您可以使用 md-colors 指令从调色板中设置任何颜色。
https://material.angularjs.org/1.1.4/api/directive/mdColors
格式将是 [?theme]-[palette]-[?hue]-[?opacity] 哪里?表示可选参数。
但根据我的经验,即使它是默认主题,您也必须指定主题:
<md-button md-colors="{color: 'default-red-A100', 'background': 'default-primary-600'}">Button</md-button>
在旁注中,忽略问题的“没有 css”部分,我看到 Material Angular 创建者使用普通的旧 css 来创建背景颜色,请参阅此 codepen(您还可以通过入门部分找到此内容:“Fork a codepen ”)。
html
<div id="content" ng-view flex> </div>
css
.demo #content {
background-color: rgb(255, 244, 220);
padding:30px;
font-weight:600;
border: 1px solid #aeaeae;
border-top:none;
}