/vuejs-colorpicker

:red_circle: Simple VueJS colorpicker using Semantic-UI :zap:

Primary LanguageJavaScriptMIT LicenseMIT

VueJS Colorpicker ⚡

  • A simple Vue.js colorpicker 🔴 for custom need.

  • This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it 🍻

Requirements

✅ Install 👌

npm install vuejs-colorpicker
// or
yarn add vuejs-colorpicker

✅ Usage 🎓

Register the component globally:

Vue.component('colorpicker', require('vuejs-colorpicker'));

Or use locally

import colorpicker from 'vuejs-colorpicker';

✅ Example 🍀

<colorpicker :colors="colors" v-on:selected-color="setColorCode"></colorpicker>
Vue.component('example-component', {
	data() {
		return {
            color_code: null,
			colors: [
				{"hex" : "#FFFFFF"}, {"hex" : "#000000"}, {"hex" : "#FF00FF"}, {"hex" : "#FFFF00"}, 
				{"hex" : "#000FFF"}, {"hex" : "#F0F0F0"}, {"hex" : "#0F0F0F"}, {"hex" : "#00FF00"}
			],
		}
	},
	methods: {
		setColorCode(color_code) {
			this.color_code = color_code;
		},
	}
});

✅ Props 📖

Name Type Description
colors Array (required) The colors to be sent to the picker, see eg. for how to send it.
icon String (optional) Default is inverted large checkmark icon; Refer Semantic-UI Icons for specifying which icons you want.

✅ Events 👂

Name Description
selected-color Emits color_code hex.

NPM :octocat:

NPM