This section explains how to create a simple DropDownButton and to configure the DropDownButton component.
The list of dependencies required to use the DropDownButton component in your application is given as follows:
|-- @syncfusion/ej2-vue-splitbuttons
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-vue-base
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
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 DropDownButton
packages using below command.
npm install @syncfusion/ej2-vue-splitbuttons --save
Vue.use()
Import the DropDownButton 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 { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
Vue.use(DropDownButtonPlugin);
export default {}
By registering component plugin in Vue, all child directives are also globally registered. We can also use
Vue.Component()
to registerDropDownButton
. Refer here to know more about component registration.
Add the EJ2 Vue DropDownButton using <ejs-dropdownbutton>
to the <template>
section of the App.vue
file in src
directory.
<template>
<ejs-dropdownbutton :items='items'>Clipboard</ejs-dropdownbutton>
</template>
<script>
import Vue from 'vue';
import { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
Vue.use(DropDownButtonPlugin);
export default {
data () {
return {
items:[
{
text: 'Cut'
},
{
text: 'Copy'
},
{
text: 'Paste'
}]
};
}
}
</script>
Add DropDownButton 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';
</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 basic DropDownButton component.
<template>
<ejs-dropdownbutton :items='items'>Clipboard</ejs-dropdownbutton>
</template>
<script>
import Vue from 'vue';
import { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(DropDownButtonPlugin);
export default {
data () {
return {
items:[
{
text: 'Cut'
},
{
text: 'Copy'
},
{
text: 'Paste'
}]
};
}
}
</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';
</style>