Question

如何在Angular 2材质中添加新颜色。

它在ng2-material docs中指定：color：“primary”|“accent”|“warn”被接受我想添加类似“progressbarcolor”之类的东西，而不是我自定义主题中为angular2材质定义的颜色。

例如：

 <md-progress-bar color="progressbarcolor">    </md-progress-bar>

Answer 1

您有两种选择：

自定义主题
- 推荐
- 使用this guide
覆盖样式
- 可能，不建议使用，但有时会在将白色装载机放入彩色按钮时使用。
  
  <md-progress-bar class="custom-color"></md-progress-bar>
  
  /deep/ md-progress-circle.custom-color path { stroke: $progress-circle-custom-color; }
  - /deep/关键字忽略了影子DOM，因此请小心使用它，它也已弃用但尚未删除
  - 您可以将代码放在全局样式文件中，因此不使用深层关键字

Answer 2

Angular Material附带内置Material Design Spec的调色板。如果您需要定义自定义调色板，可以使用$ mdThemingProvider来定义它，从而使其可用于您的主题以用于其意图组。请注意，您必须在定义映射中指定所有色调。

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

  $mdThemingProvider.definePalette('amazingPaletteName', {
    '50': 'ffebee',
    '100': 'ffcdd2',
    '200': 'ef9a9a',
    '300': 'e57373',
    '400': 'ef5350',
    '500': 'f44336',
    '600': 'e53935',
    '700': 'd32f2f',
    '800': 'c62828',
    '900': 'b71c1c',
    'A100': 'ff8a80',
    'A200': 'ff5252',
    'A400': 'ff1744',
    'A700': 'd50000',
    'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
                                        // on this palette should be dark or light

    'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
     '200', '300', '400', 'A100'],
    'contrastLightColors': undefined    // could also specify this if default was 'dark'
  });

  $mdThemingProvider.theme('default')
    .primaryPalette('amazingPaletteName')

});

添加新颜色以及自定义主题颜色angular2 material

2 个答案: