Theme Picker

<div layout="column" ng-cloak="" ng-controller="ThemeDemoCtrl" class="md-padding colorsdemoThemePicker" ng-app="MyApp">

  <p>

    从中选择一个颜色 <a class="md-accent" href="{{mdURL}}">主题颜色调色板</a>

   在下面:

  </p>

  <!-- Theme Options -->

  <div layout="row" layout-wrap="" layout-align="center center">

    <md-button ng-repeat="color in colors" flex-gt-md="15" flex="30" md-colors="{background: '{{color}}'}" md-colors-watch="false" ng-disabled="primary === color && !isPrimary" ng-click="selectTheme(color)">

      {{color}}

    </md-button>

  </div>

  <!-- Footnote -->

  <p style="padding-top: 20px;">

   下面是自定义的颜色 <code><theme-preview></code> 组件

    更新的 <code><md-colors></code>

  </p>

  <!-- Theme Preview -->

  <div layout="row" class="section" layout-align="center center">

    <div layout="column" flex="50">

      <span class="componentTag"><theme-preview></span>

      <theme-preview primary="primary" accent="accent"></theme-preview>

    </div>

  </div>

  <!-- Footnote -->

  <p class="footnote">

   注意，前台颜色会自动确定（从主题配置）

​

基于指定的背景调色板选择。当然，你可以很容易地重写

​

前景颜色也...

  </p>

​

<script type="text/ng-template" id="themePreview.tmpl.html"><div layout="column">

  <div md-colors="{background: '{{primary}}-500'}"  md-justified="column" class="primary line">

    <span>Primary - {{primary}}</span>

    <div md-justified >

      <span>500</span>

      <span>{{getColor(primary + '-500')}}</span>

    </div>

  </div>

  <div md-colors="{background: '{{primary}}-700'}" md-justified class="line" >

    <span>700</span>

    <span>{{getColor(primary + '-700')}}</span>

  </div>

  <div md-colors="{background: '{{primary}}-800'}" md-justified class="line" >

    <span>800</span>

    <span>{{getColor(primary + '-800')}}</span>

  </div>

  <div md-colors="{background: '{{accent}}-A200'}" md-justified="column" class="accent line">

    <span>Accent - {{accent}}</span>

    <div md-justified>

      <span>A200</span>

      <span>{{getColor(accent + '-A200')}}</span>

    </div>

  </div>

</div>

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

-->