Basic Usage

Basic Usage.markdown

Basic Usage

A Pen by 杨俊 on CodePen.

License.

index.html

<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 http://material.angularjs.org/license.
-->

script.js

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .config(function ($mdThemingProvider, $mdIconProvider) {
    $mdThemingProvider.theme('forest')
      .primaryPalette('brown')
      .accentPalette('green');

    $mdIconProvider
      .defaultIconSet('img/icons/sets/social-icons.svg', 24);
  })
  .directive('regularCard', function () {
    return {
      restrict: 'E',
      templateUrl: 'regularCard.tmpl.html',
      scope: {
        name: '@',
      }
    }
  })
  .directive('userCard', function () {
    return {
      restrict: 'E',
      templateUrl: 'userCard.tmpl.html',
      scope: {
        name: '@',
        theme: '@'
      },
      controller: function ($scope) {
        $scope.theme = $scope.theme || 'default';
      }
    }
  });


/**
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 http://material.angularjs.org/license.
**/

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>

style.css

.colorsdemoBasicUsage .card-media {
  margin-right: 16px;
  border-radius: 50%;
  overflow: hidden; }

.colorsdemoBasicUsage .md-subhead.description {
  color: rgba(255, 255, 255, 0.7); }

.colorsdemoBasicUsage .card-media md-icon {
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.87); }

.colorsdemoBasicUsage span.card-title {
  padding-left: 15px;
  margin-top: 20px; }

.colorsdemoBasicUsage code.css {
  background-color: #fffcc2; }

.colorsdemoBasicUsage p.footnote code {
  font-size: 0.85em; }

.colorsdemoBasicUsage p.footnote {
  font-size: 0.85em;
  margin: 30px;
  padding: 5px;
  background-color: rgba(205, 205, 205, 0.45); }


/*
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 http://material.angularjs.org/license.
*/

styles

<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />