Created
July 16, 2016 03:09
-
-
Save 2947721120/339be12c3e8ef0c27cf89fa12e6a87d0 to your computer and use it in GitHub Desktop.
Basic Usage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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. | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | |
**/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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. | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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" /> |
Author
2947721120
commented
Jul 16, 2016
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment