我正在使用Angular Material框架开发一个纯Material Design应用程序 .
但是,我不明白如何设置容器的背景颜色(例如,具有蓝色背景的登录表单) . 我当然可以使用CSS,但我想知道是否有一个内置的指令/主题选项来做到这一点 .
我很确定我在文档的某个地方看到了这个,但我现在无法找到它 . 你必须做两件事:
设置 .backgroundPalette('indigo') 与设置主要主题的方式相同
.backgroundPalette('indigo')
创建容器
我在0.8.1版本的角度材料上检查它,它工作正常 .
如果您有任何其他问题,请随时询问 .
例如:
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
格式将是[?主题] - [调色板] - [?hue] - [?opacity]在哪里?表示可选参数 .
但根据我的经验,你必须指定主题,即使它是默认的:
<md-button md-colors="{color: 'default-red-A100', 'background': 'default-primary-600'}">Button</md-button>
在旁注中,忽略问题的"without css"部分,我看到Material Angular创建者使用普通的旧css创建背景颜色,请参阅this codepen(您也可以通过Getting Started部分找到此信息:"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; }
3 回答
我很确定我在文档的某个地方看到了这个,但我现在无法找到它 . 你必须做两件事:
设置
.backgroundPalette('indigo')
与设置主要主题的方式相同创建容器
我在0.8.1版本的角度材料上检查它,它工作正常 .
如果您有任何其他问题,请随时询问 .
例如:
并在您的模板中:
您可以使用md-colors指令从调色板中设置任何颜色 .
https://material.angularjs.org/1.1.4/api/directive/mdColors
格式将是[?主题] - [调色板] - [?hue] - [?opacity]在哪里?表示可选参数 .
但根据我的经验,你必须指定主题,即使它是默认的:
在旁注中,忽略问题的"without css"部分,我看到Material Angular创建者使用普通的旧css创建背景颜色,请参阅this codepen(您也可以通过Getting Started部分找到此信息:"Fork a codepen") .
html
css