如何使用自定义调色板与角材质框架

How to use Custom Palettes with Angular Material Framework

本文关键字：框架 何使用 自定义 调色板      更新时间：2023-09-26

我在使用自定义调色板和角材质框架时遇到了一些问题。我仍然不明白自己使用自定义主题。

在angular的配置文件中。

$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');

View文件

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

我有问题要问

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

试试这个

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>

我试过了，它可以工作

相关文章：