Question

我在使用自定义选项板和Angular Material Framework时遇到了一些问题。我仍然不了解自己使用自定义主题。

在angular config文件中。

$mdThemingProvider.definePalette('crmPalette', {
    '50': 'fafafa',
    '100': 'ffcdd2',
    '200': '000000',
    '300': 'e57373',
    '400': 'ef5350',
    '500': 'f44336',
    '600': 'e53935',
    '700': 'd32f2f',
    '800': 'c62828',
    '900': 'b71c1c',
    'A100': 'ff8a80',
    'A200': 'ff5252',
    'A400': 'ff1744',
    'A700': 'd50000',
    'contrastDefaultColor': 'light',
    'contrastDarkColors': ['50', '100', '200'],
    'contrastLightColors': undefined
});

$mdThemingProvider.theme('crmPaletteTheme')
    .primaryPalette('crmPalette');

在视图文件中

<div md-theme="crmPaletteTheme">
    <md-button class="md-raised">Login</md-button>
</div>

我有问题要问

定义自定义主题后，如何使用'fafafa'和'ffcdd2'将背景颜色和颜色分配给md按钮。

Answer 1

试试这个。

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

    $mdThemingProvider.definePalette('colormaterial', {
        '50': '14f9fc',
        '100': '1949a8',
        '200': 'ef9a9a',
        '300': 'e57373',
        '400': 'ef5350',
        '500': 'f44336',
        '600': 'e53935',
        '700': 'd32f2f',
        '800': 'c62828',
        '900': 'b71c1c',
        'A100': 'ff8a80',
        'A200': 'ff5252',
        'A400': 'ff1744',
        'A700': 'd50000',
    });
    $mdThemingProvider.theme('default')
      .primaryPalette('colormaterial')
}).controller('appController', function ($scope) {

});

在html中

       <md-input-container class="sin-margin ancho-total-element">
           <md-button md-colors="{'background-color': 'colormaterial-100'}" class="md-raised md-primary" type="submit"> Inicie Sesión </md-button>
       </md-input-container>

我尝试了它并且有效

如何将自定义选项板与Angular Material Framework一起使用

1 个答案: