2017-05-30 46 views
3

我不能將md-colors指令與我的md-fab相加。 md-fab默認爲accent-A200顏色,我無法使用自定義主題更改它。我不想用常規的CSS來代替md-colorsAngular 1.6.4中的md-colors指令的問題

這裏MD-彩色文檔:https://material.angularjs.org/1.1.0/api/directive/mdColors

一切工作與我的主題化。

這裏主題化角的文檔:https://material.angularjs.org/1.1.0/Theming/03_configuring_a_theme

我在做什麼錯?

我無法在JSFiddle/Plunker上提供我的所有應用程序。下面的一段代碼。告訴我你是否需要更多。

謝謝鄉親:)

HTML部分

<div md-colors="{background-color: 'rouge-A100'}" class="ajouter-membre-container"> 
    <md-button href="" class="md-fab md-mini md-warn md-fab--equipe"> 
     <md-icon md-svg-src="/img/icones/add.svg"></md-icon> 
    </md-button> 
</div> 

主題化部分

$mdThemingProvider.definePalette('rouge', { 
     '50': 'fde4e6', 
     '100': 'fabbc1', 
     '200': 'f68e97', 
     '300': 'f2606d', 
     '400': 'f03e4e', 
     '500': 'ed1c2f', 
     '600': 'eb192a', 
     '700': 'e81423', 
     '800': 'e5111d', 
     '900': 'e00912', 
     'A100': 'ffffff', 
     'A200': 'ffd7d8', 
     'A400': 'ffa4a6', 
     'A700': 'ff8b8d', 
     'contrastDefaultColor': 'light' 

    }); 
    $mdThemingProvider.theme('myTheme') 
     .accentPalette('rouge') 

    $mdThemingProvider.definePalette('vert', { 
     '50': 'e0f5f4', 
     '100': 'b3e7e4', 
     '200': '80d7d3', 
     '300': '4dc7c1', 
     '400': '26bbb3', 
     '500': '00afa6', 
     '600': '00a89e', 
     '700': '009f95', 
     '800': '00968b', 
     '900': '00867b', 
     'A100': 'b3fff7', 
     'A200': '80fff2', 
     'A400': '4dffed', 
     'A700': '33ffeb', 
     'contrastDefaultColor': 'light' 

    }); 
    $mdThemingProvider.theme('myTheme') 
     .primaryPalette('vert') 


    $mdThemingProvider.definePalette('orange', { 
     '50': 'fff3eb', 
     '100': 'ffe0ce', 
     '200': 'ffccad', 
     '300': 'ffb88c', 
     '400': 'ffa874', 
     '500': 'ff995b', 
     '600': 'ff9153', 
     '700': 'ff8649', 
     '800': 'ff7c40', 
     '900': 'ff6b2f', 
     'A100': 'ffffff', 
     'A200': 'ffffff', 
     'A400': 'ffe4da', 
     'A700': 'ffd1c1', 
     'contrastDefaultColor': 'light' 
    }); 

    $mdThemingProvider.theme('myTheme') 
     .warnPalette('orange') 


    $mdThemingProvider.setDefaultTheme('myTheme'); 
}); 
+2

爲什麼不穿上'MD-button''MD-colors'? –

回答

1

從我的official documentation的理解,md-colors指令應放在對md-button指令。

<div class="ajouter-membre-container"> 
    <md-button md-colors="{ background-color: 'rouge-A100' }" href="" class="md-fab md-mini md-warn md-fab--equipe"> 
     <md-icon md-svg-src="/img/icones/add.svg"></md-icon> 
    </md-button> 
</div>