角材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背景

回答

相关问题