Basic Usage

<div layout="column" ng-cloak="" class="md-padding colorsdemoBasicUsage" ng-app="MyApp">
  <p style="margin-bottom: 10px;">
    使用元素元素的自定义组件实现经常想容易地应用主题颜色

到他们的自定义组件。考虑自定义组件。 <code><user-card></code> 在下面

那里的 <code>md-colors</code> 属性用于颜色的背景和文本颜色

使用当前或指定的主题调色板颜色.
  </p>
  
  <span class="card-title"> <code><user-card></code> without md-color features</span>
  <regular-card name="User name" md-theme="default"></regular-card>
  
  <span class="card-title"> <code><user-card></code>使用"默认"主题着色</span>
  <user-card name="User name"></user-card>
  
  <span class="card-title"> <code><user-card></code> 着色用 'forest' 主题</span>
  <user-card name="User name" theme="forest"></user-card>
  
  <p class="footnote">
   注：本 <code>md-colors</code> 指令允许预定义的主题颜色可以很容易地应用

CSS样式属性. <code>md-colors</code>使用定义的调色板
    <a class="md-accent" href="https://www.google.com/design/spec/style/color.html">材料设计的颜色</a>
   和定义的主题使用 <code>$mdThemingProvider</code>. 此功能只是一个

延伸的 <code>$mdTheming</code> 特征.
  </p>
<script type="text/ng-template" id="regularCard.tmpl.html"><md-card>
  <md-card-title>
    <md-card-title-media>
      <div class="md-media-sm card-media" layout layout-align="center center" >
        <md-icon md-svg-icon="person" style="color:grey"></md-icon>
      </div>
    </md-card-title-media>
    <md-card-title-text>
      <span class="md-headline">{{name}}</span>
      <span class="md-subhead description">lorem ipsum买者自负...</span>
    </md-card-title-text>
  </md-card-title>
</md-card>
</script><script type="text/ng-template" id="userCard.tmpl.html"><md-card md-colors="::{backgroundColor: '{{theme}}-primary-700'}">
  <md-card-title>
    <md-card-title-media>
      <div class="md-media-sm card-media" layout layout-align="center center"
           md-colors="::{background: '{{theme}}-accent'}">
        <md-icon md-svg-icon="person"></md-icon>
      </div>
    </md-card-title-media>
    <md-card-title-text>
      <span class="md-headline">{{name}}</span>
      <span class="md-subhead description">This card is colored according the {{theme}} theme</span>
    </md-card-title-text>
  </md-card-title>
</md-card>
</script></div>