Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/toyobayashi/vscode-color-picker
https://github.com/toyobayashi/vscode-color-picker
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/toyobayashi/vscode-color-picker
- Owner: toyobayashi
- Created: 2020-07-29T10:18:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-11T10:26:11.000Z (about 4 years ago)
- Last Synced: 2024-10-11T20:58:32.797Z (27 days ago)
- Language: TypeScript
- Size: 689 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vscode-color-picker
Demo: [https://toyobayashi.github.io/vscode-color-picker](https://toyobayashi.github.io/vscode-color-picker)
## Usage
### CDN
Pure JavaScript:
``` html
(function () {
var ColorPicker = vscodeColorPicker.ColorPicker;
var initialColor = '#aaa';
var color = ColorPicker.toColor(initialColor);
var picker = new ColorPicker(document.getElementById('container'), {
color: initialColor,
presentation: ColorPicker.formatColor(color, ColorPicker.ColorType.RGB)
});
picker.onColorChanged(function (color) {
picker.setPresentation(ColorPicker.formatColor(color, ColorPicker.ColorType.RGB));
});
})();
```
Vue:
``` html
(function () {
// Vue.component('VscodeColorPicker', VscodeColorPickerVue);
new Vue({
components: {
VscodeColorPicker: VscodeColorPickerVue
}
}).$mount('#app');
})();
```
### Webpack
Pure JavaScript:
``` js
import '@tybys/vscode-color-picker/lib/vscode-color-picker.css'
import { ColorPicker } from '@tybys/vscode-color-picker'
```
Vue:
``` vue
{{color}}
import '@tybys/vscode-color-picker/lib/vscode-color-picker.css'
import { ColorPicker } from '@tybys/vscode-color-picker'
import VscodeColorPicker from '@tybys/vscode-color-picker/lib/vue/index.js'
export default {
components: {
VscodeColorPicker
},
data () {
return {
color: '#aaa'
}
},
computed: {
presentation () {
return ColorPicker.formatColor(this.color, ColorPicker.ColorType.RGB)
}
},
methods: {
onColorChange (color) {
this.color = color
}
}
}
```
React:
``` jsx
import '@tybys/vscode-color-picker/lib/vscode-color-picker.css'
import { ColorPicker } from '@tybys/vscode-color-picker'
import VscodeColorPicker from '@tybys/vscode-color-picker/lib/react/index.js'
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
constructor (props) {
super(props)
const initialColor = '#aaa'
const color = ColorPicker.toColor(initialColor)
this.state = {
color: initialColor,
presentation: ColorPicker.formatColor(color, ColorPicker.ColorType.RGB)
}
this.onColorChange = this.onColorChange.bind(this)
}
render () {
return (
{this.state.color}
)
}
onColorChange (color) {
this.setState({
color,
presentation: ColorPicker.formatColor(color, ColorPicker.ColorType.RGB)
})
}
}
ReactDOM.render(, document.getElementById('app'))
```