Getting Started
16 Mar 20234 minutes to read
This section explains how to create a default ColorPicker and to configure the ColorPicker component.
Prerequisites
System requirements for Syncfusion Vue UI components
Dependencies
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
Installation and configuration
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
Registering ColorPicker component using 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.
Initialize ColorPicker
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>
Adding CSS Reference
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>
Run the application
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>
Inline type
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.