This section explains how to create a default ColorPicker and to configure the ColorPicker component.
The list of dependencies required to use the ColorPicker component in your application is given below:
|-- @syncfusion/ej2-vue-inputs
|-- @syncfusion/ej2-vue-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-splitbuttons
You can use Vue CLI
to setup your vue applications.
To install Vue CLI use the following command.
npm install -g @vue/cli
npm install -g @vue/cli-init
Start a new project using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
Install Syncfusion ColorPicker
packages using below command.
npm install @syncfusion/ej2-vue-inputs --save
Vue.use()
Import the ColorPicker Plugin from the Essential JS 2 Vue package and register the same using Vue.use()
with Component Plugin as its argument.
Refer to the code snippet given below.
import Vue from 'vue';
import { ColorPickerPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(ColorPickerPlugin);
export default {}
By registering component plugin in Vue, all child directives are also globally registered. We can also use
Vue.Component()
to registerColorPicker
. Refer here to know more about component registration.
Add the EJ2 Vue ColorPicker using <ejs-colorpicker>
to the <template>
section of the App.vue
file in src
directory.
<template>
<ejs-colorpicker></ejs-colorpicker>
</template>
<script>
import Vue from 'vue';
import { ColorPickerPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(ColorPickerPlugin);
export default {}
</script>
Add ColorPicker component’s styles as given below in <style>
section of the App.vue
file.
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
</style>
Now run the npm run dev
command in the console, it will build your application and open in the browser.
The following example shows a default ColorPicker.
<template>
<div class='wrap'>
<h4>Choose Color</h4>
<ejs-colorpicker></ejs-colorpicker>
</div>
</template>
<script>
import Vue from 'vue';
import { ColorPickerPlugin } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(ColorPickerPlugin);
export default {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
By default, the ColorPicker will be rendered using SplitButton and open the pop-up to access the ColorPicker. To
render the ColorPicker container alone and to access it directly, render it as inline. It can be achieved by setting the inline
property to true
.
The following sample shows the inline type rendering of ColorPicker.
<template>
<div class='wrap'>
<h4>Choose Color</h4>
<ejs-colorpicker :inline="true" :showButtons="false"></ejs-colorpicker>
</div>
</template>
<script>
import Vue from 'vue';
import { ColorPickerPlugin } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(ColorPickerPlugin);
export default {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
The
showButtons
property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to theshowButtons
sample.