forked from simonwep/pickr
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (160 loc) · 6.72 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#42445A">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#42445A">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#42445A">
<!-- SEO Stuff -->
<meta name="audience" lang="en" content="all">
<meta name="expires" content="7 days">
<meta name="robots" content="follow">
<meta name="revisit-after" content="7 days">
<meta name="page-topic" content="Color picker">
<meta name="copyright" content="Simon Reinisch">
<meta name="author" content="Simon Reinisch">
<meta name="description" content="Flat, simple, responsive and hackable Color-Picker. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize.">
<meta name="keywords" content="colorpicker, color-picker, design, ux-design, ui-design, web-development, programming, colors">
<!-- Open Graph tags -->
<meta property="og:image" content="gh-page/pickr.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://simonwep.github.io/pickr/">
<meta property="og:site_name" content="Pickr">
<meta property="og:title" content="Pickr">
<meta property="og:description" content="Flat, simple, responsive and hackable Color-Picker. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize.">
<title>Pickr</title>
<!-- Icons -->
<link rel="icon" href="gh-page/pickr.png">
<link rel="fluid-icon" href="gh-page/pickr.png">
<link rel="apple-touch-icon" href="gh-page/pickr.png"/>
<!-- Style sheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:200,400,500">
<link href="dist/pickr.min.css" rel="stylesheet">
<link href="gh-page/css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Flat color picker</h1>
<a href="https://github.com/Simonwep/pickr">VIEW ON GITHUB</a>
</header>
<main>
<section class="demo">
<div class="center">
<div class="color-picker"></div>
</div>
</section>
<section class="demo-code">
<h2>Example code</h2>
<pre><code class="prettyprint">const pickr = new Pickr({
el: '.color-picker',
default: '#42445A',
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
hsva: true,
input: true,
clear: true,
save: true
}
}
});</code></pre>
</section>
<section>
<h2>Handle what the user picked</h2>
<pre><code class="prettyprint">const pickr = new Pickr({
// User has changed the color
onChange(hsva, instance) {
hsva; // HSVa color object, if cleared null
instance; // Current Pickr instance
},
// User has clicked the save button
onSave(hsva, instance) {
// same as onChange
}
});</code></pre>
</section>
<section>
<h2>Available options</h2>
<pre><code class="prettyprint">const pickr = new Pickr({
// Selector or element which will be replaced with the actual color-picker.
// Can be a HTMLElement.
el: '.color-picker',
// Using the 'el' Element as button, won't replace it with the pickr-button.
// If true, appendToBody will also be automatically true.
useAsButton: false,
// Start state. If true 'disabled' will be added to the button's classlist.
disabled: false,
// If set to false it would directly apply the selected color on the button and preview.
comparison: true,
// Default color
default: 'fff',
// Default color representation.
// Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
defaultRepresentation: 'HEX',
// Option to keep the color picker always visible. You can still hide / show it via
// 'pickr.hide()' and 'pickr.show()'. The save button keeps his functionality, so if
// you click it, it will fire the onSave event.
showAlways: false,
// If the color picker should have the body element as it's parent.
appendToBody: false,
// Close pickr with this specific key.
// Default is 'Escape'. Can be the event key or code.
closeWithKey: 'Escape',
// Defines the position of the color-picker. Available options are
// top, left and middle relativ to the picker button.
// If clipping occurs, the color picker will automatically choose his position.
position: 'middle',
// Enables the ability to change numbers in an input field with the scroll-wheel.
// To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five
adjustableNumbers: true,
// Show or hide specific components.
// By default only the palette (and the save button) is visible.
components: {
preview: true, // Left side color comparison
opacity: true, // Opacity slider
hue: true, // Hue slider
// Bottom interaction bar, theoretically you could use 'true' as propery.
// But this would also hide the save-button.
interaction: {
hex: true, // hex option (hexadecimal representation of the rgba value)
rgba: true, // rgba option (red green blue and alpha)
hsla: true, // hsla option (hue saturation lightness and alpha)
hsva: true, // hsva option (hue saturation value and alpha)
cmyk: true, // cmyk option (cyan mangenta yellow key )
input: true, // input / output element
clear: true, // Button which provides the ability to select no color,
save: true // Save button
},
},
// Button strings, brings the possibility to use a language other than English.
strings: {
save: 'Save', // Default for save button
clear: 'Clear' // Default for clear button
},
// User has changed the color
onChange(hsva, instance) {
hsva; // HSVa color object, if cleared null
instance; // Current Pickr instance
},
// User has clicked the save button
onSave(hsva, instance) {
// same as onChange
}
});</code></pre>
</section>
</main>
<script src="dist/pickr.min.js"></script>
<script src="gh-page/js/script.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<link href="gh-page/css/highlight.css" rel="stylesheet">
</body>
</html>