Created
July 16, 2016 02:41
-
-
Save 2947721120/ec6de4600cb4c94617b3223668bfa87b to your computer and use it in GitHub Desktop.
Theme Picker
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="" 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 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']) | |
.controller('ThemeDemoCtrl', function ($scope, $mdColorPalette) { | |
$scope.colors = Object.keys($mdColorPalette); | |
$scope.mdURL = 'https://www.google.com/design/spec/style/color.html#color-color-palette'; | |
$scope.primary = 'purple'; | |
$scope.accent = 'green'; | |
$scope.isPrimary = true; | |
$scope.selectTheme = function (color) { | |
if ($scope.isPrimary) { | |
$scope.primary = color; | |
$scope.isPrimary = false; | |
} | |
else { | |
$scope.accent = color; | |
$scope.isPrimary = true; | |
} | |
}; | |
}) | |
.directive('themePreview', function () { | |
return { | |
restrict: 'E', | |
templateUrl: 'themePreview.tmpl.html', | |
scope: { | |
primary: '=', | |
accent: '=' | |
}, | |
controller: function ($scope, $mdColors, $mdColorUtil) { | |
$scope.getColor = function (color) { | |
return $mdColorUtil.rgbaToHex($mdColors.getThemeColor(color)) | |
}; | |
} | |
} | |
}) | |
.directive('mdJustified', function() { | |
return { | |
restrict : 'A', | |
compile : function(element, attrs) { | |
var layoutDirection = 'layout-'+ (attrs.mdJustified || "row"); | |
element.removeAttr('md-justified'); | |
element.addClass(layoutDirection); | |
element.addClass("layout-align-space-between-stretch"); | |
return angular.noop; | |
} | |
}; | |
}); | |
/** | |
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
.colorsdemoThemePicker .section { | |
font-size: 12px; | |
padding: 16px; | |
font-weight: bold; } | |
.colorsdemoThemePicker .line { | |
padding: 16px; } | |
.colorsdemoThemePicker .primary, .colorsdemoThemePicker .accent { | |
margin: 4px 0; | |
height: 120px; } | |
.colorsdemoThemePicker [md-colors] { | |
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1); } | |
.colorsdemoThemePicker p.footnote { | |
font-size: 0.85em; | |
margin: 30px; | |
padding: 5px; | |
background-color: rgba(205, 205, 205, 0.45); } | |
.colorsdemoThemePicker .componentTag { | |
font-weight: bolder; | |
font-size: 1.2em; | |
padding-left: 10px; } | |
/* | |
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