角材md-card-header背景

我正在開發一個使用角材的小型AngularJS應用程序。問題是我無法弄清楚如何使用我的配置中定義的調色板來正確設置md-card-header的背景顏色。角材md-card-header背景

$mdThemingProvider.theme('default') 
    .primaryPalette('blue') 
    .accentPalette('pink');

基本上我想設置主要的顏色作爲卡頭的背景顏色。我當然可以複製RGB值，創建一個類並使用此類設置顏色。但是，我會放棄在運行時更改主題的好處，或者至少我必須在更改主題時手動更改顏色。

如何將md-colors設置爲任何元素，尤其是md-card-header？

來源

2016-03-03 LordTribual

您目前還不能在角材料中着色背景。舉個例子，我會通過使用md-toolbar來解決這個問題。您可以使用class="md-warn/md-primary/md-accent"使用調色板中的顏色進行設計。

<md-card> 
    <md-toolbar class="md-warn" style="border-radius: 3px 3px 0 0"> 
    <md-card-header> 
     <md-card-avatar> 
     <img class="md-user-avatar" src="..."> 
     </md-card-avatar> 
     <md-card-header-text> 
      <span class="md-title">User</span> 
      <span class="md-subhead">subhead</span> 
     </md-card-header-text> 
     </md-card-header> 
    </md-toolbar>

更新：

角材料只是增加了一個color service and a directive使用的主題定義的顏色代碼（1.1.0-RC4）的任何地方。

您現在可以做<md-card-header md-colors="::{backgroundColor: 'default-primary-700'}">。

我更新了codepen。

http://codepen.io/kuhnroyal/pen/pygvyR

來源

2016-03-06 17:36:19 kuhnroyal

檢查HTTPS：//材料.angularjs.org/latest/api/directive/mdCard卡內置：point。無法在md卡內添加md-toolbar – kTn

真是太遺憾了。那麼，我必須使用自定義類來爲卡片標題着色。 – LordTribual

@ktn當然，您可以添加它，與添加'md-button'和其他大多數指令的方式相同。它可能並不意味着以這種方式使用，但它是目前唯一可用的解決方法。 – kuhnroyal

-1

檢查https://material.angularjs.org/latest/Theming/02_declarative_syntax

主題化在角材料適用於本

MD-按鈕
MD-複選框
MD-進展圓形
MD-進展 - 線性
MD-單選按鈕
MD-滑塊
MD-開關
MD-突片
MD-文本浮子
MD-工具欄

來源

2016-03-09 07:54:02 kTn

角材md-card-header背景

回答

相關問題