forked from brianpkelley/md-color-picker
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
116 lines (92 loc) · 4.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!-- Angular Material CSS now available via Google CDN; version 0.10 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<link rel="stylesheet" href="demo/css/style.css" />
<link rel="stylesheet" href="dist/mdRainbow.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<md-content layout-padding layout="row">
<div flex>
<h3>Angular md-color-picker</h3>
<h5>*** BETA ***</h5>
<p style="margin-bottom: 5px;">A pop up color chooser featuring:</p>
<ul>
<li>HSL Specturm</li>
<li>RGBA Sliders</li>
<li>Palette Selection</li>
<li>$cookie based history</li>
<li>Multiple output formats</li>
</ul>
<h5>Spectrum Selector</h5>
<p>Canvas based spectrum selection tool, no images or tricky css.</p>
<h5>RGBA Sliders</h5>
<p>Angular Material sliders and manual input.</p>
<h5>$cookie Based History</h5>
<p>If <code>$cookies</code> is not included in your app, the history function will fall back to an array based history that is reset on each reload.</p>
<h5>Multiple Output Formats</h5>
<p>Using <a href="https://github.com/bgrins/TinyColor">tinycolor.js</a> we can output hexadecimal, rgb(a), or hsl(a) formats.</p>
<h5>Misc.</h5>
<ul>
<li>Random Color on open (optional)</li>
<li>Input focus opens color chooser (optional)</li>
<li>Default color on open (optional)</li>
<li>Specify output type</li>
<li>Accepts label and icon for use in the generated <code>md-input-container</code></li>
</ul>
</div>
<div layout="column" layout-margin flex="40">
<h2>Demo</h2>
<h4>*** Text Color ***</h4>
<p>The text color field is not using the <code>openOnInput</code> attribute and you must click on the preview circle to open the color chooser. This allows you to manually type a color value without opening the color chooser.</p>
<p>This field has a label and icon specified.</p>
<h4>*** Text Background ***</h4>
<p>The text background field is using the <code>openOnInput</code> and the <code>random</code> attributes. This will maket he field open to a random color if one is not already selected when the input field receives focus.</p>
<p>This field only has the label specified.</p>
<h4>Text Style</h4>
<md-input-container>
<label>Font</label>
<md-select ng-model="textConfig.font" aria-label="Font Family">
<md-option ng-repeat="font in textConfig.fonts" ng-style="{'font-family':font}">{{font}}</md-option>
</md-select>
</md-input-container>
<div layout="row">
<div md-color-picker ng-model="textConfig.textColor" md-color-preview flex></div>
</div>
<div layout="row">
<div flex
md-color-picker="textConfig.backgroundOptions"
ng-model="textConfig.textBackground"
md-color-history="true"
md-color-alpha-channel="true"
></div>
</div>
<div>
<h5>Text Preview</h5>
<div class="md-color-picker-checkered-bg" layout="row" layout-align="center center">
<div class="text-preview" ng-style="{'background-color': textConfig.textBackground, 'color': textConfig.textColor, 'font-family': textConfig.font}" style="width: 100%; height: 100%;" layout="row" layout-align="center center" layout-padding>
The five boxing wizards jump quickly.
</div>
</div>
</div>
</div>
<span flex="10"></span>
</md-content>
<script src="demo/lib/tinycolor/dist/tinycolor-min.js"></script>
<!-- Angular Material Dependencies -->
<script src="demo/lib/angular/angular.min.js"></script>
<script src="demo/lib/angular-animate/angular-animate.min.js"></script>
<script src="demo/lib/angular-aria/angular-aria.min.js"></script>
<script src="demo/lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="demo/lib/angular-material/angular-material.min.js"></script>
<!-- Custom Scripts -->
<script src="dist/mdRainbow.min.js"></script>
<script src="demo/js/app.js"></script>
</body>
</html>