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>

  <!-- Example 1 -->

  <span class="card-title"> <code><user-card></code> without md-color features</span>

  <regular-card name="User name" md-theme="default"></regular-card>

  <!-- Example 2 -->

  <span class="card-title"> <code><user-card></code>使用"默认"主题着色</span>

  <user-card name="User name"></user-card>

  <!-- Example 3 -->

  <span class="card-title"> <code><user-card></code> 着色用 'forest' 主题</span>

  <user-card name="User name" theme="forest"></user-card>

  <!-- Footnote -->

  <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>

​

<!--

Copyright 2016 Google Inc. All Rights Reserved. 

Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at https://material.angularjs.org/license.

-->