首页 文章

角度材质:如何设置背景颜色(不含CSS)

提问于
浏览
17

我正在使用Angular Material框架开发一个纯Material Design应用程序 .

但是,我不明白如何设置容器的背景颜色(例如,具有蓝色背景的登录表单) . 我当然可以使用CSS,但我想知道是否有一个内置的指令/主题选项来做到这一点 .

3 回答

  • 26

    我很确定我在文档的某个地方看到了这个,但我现在无法找到它 . 你必须做两件事:

    • 设置 .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>
    
  • 1

    您可以使用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>
    
  • -12

    在旁注中,忽略问题的"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;
    }
    

相关问题