diff --git a/README.md b/README.md
index da8e62c..213f288 100644
--- a/README.md
+++ b/README.md
@@ -56,41 +56,23 @@ npm run dev
```
## Usage
+
```js
-var defaultProps = {
+var colors = {
hex: '#194d33',
- hsl: {
- h: 150,
- s: 0.5,
- l: 0.2,
- a: 1
- },
- hsv: {
- h: 150,
- s: 0.66,
- v: 0.30,
- a: 1
- },
- rgba: {
- r: 25,
- g: 77,
- b: 51,
- a: 1
- },
+ hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
+ hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
+ rgba: { r: 25, g: 77, b: 51, a: 1 },
a: 1
}
-
-// or defaultProps can be
-var defaultProps = '#194d33'
+// or
+var colors = '#194d33'
// or
-var defaultProps = {
- h: 150,
- s: 0.66,
- v: 0.30
-}
-// or a object of rgb or hsl
-
+var colors = { h: 150, s: 0.66, v: 0.30 }
+// or
+var colors = { r: 255, g: 0, b: 0 }
+// etc...
new Vue({
el: '#app',
@@ -103,13 +85,17 @@ new Vue({
'chrome-picker': chrome,
'photoshop-picker': photoshop
},
- data: {
- colors: defaultProps
+ data () {
+ return {
+ colors
+ }
}
})
```
+`colors` accepts either a string of a hex color '#333' or a object of rgb or hsl values `{ r: 51, g: 51, b: 51 }` or `{ h: 0, s: 0, l: .10 }`, whatever [tinycolor2](https://www.npmjs.com/package/tinycolor2) accepts as an input.
+
```html
@@ -127,12 +113,6 @@ OR
```
-
-## TODO
--[] docs
--[] more components
-
-
## License
vue-color is licensed under [The MIT License](LICENSE).