This section explains how to create a simple ButtonGroup, and configure its available functionalities in Vue using Vue quickstart seed repository.
The list of dependencies required to use the Button component in your application is given below:
|-- @syncfusion/ej2-splitbuttons
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
vue init webpack-simple quickstart
cd quickstart
npm install
ButtonGroup
packages using below command.npm install @syncfusion/ej2-splitbuttons --save
Add a div element with class name as e-btn-group
and add the button elements that needs to be group inside the div
element in App.vue
file.
To render button elements as EJ2 Vue Button, then add Button dependencies
in
systemjs.config.js
file. Then import ButtonPlugin
from ej2-vue-buttons
.
<template>
<div id='app'>
<div class="e-btn-group">
<ejs-button>HTML</ejs-button>
<ejs-button>CSS</ejs-button>
<ejs-button>Javascript</ejs-button>
</div>
</div>
</template>
Add ButtonGroup 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.
<template>
<div id='app'>
<div class="e-btn-group">
<ejs-button>HTML</ejs-button>
<ejs-button>CSS</ejs-button>
<ejs-button>Javascript</ejs-button>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
export default {
name: 'app'
}
</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";
#app {
margin: 20px;
}
.e-btn-group {
margin: 25px 5px 20px 20px;
}
</style>
ButtonGroup can be arranged in vertical and horizontal orientation. By default, it is horizontally aligned.
ButtonGroup can be aligned vertically using the built-in CSS class e-vertical
to the target element.
The following example illustrates how to achieve vertical orientation in ButtonGroup,
<template>
<div id='app'>
<div class="e-btn-group e-vertical">
<ejs-button >HTML</ejs-button>
<ejs-button >CSS</ejs-button>
<ejs-button >Javascript</ejs-button>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
export default {
name: 'app'
}
</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";
#app {
margin: 20px;
}
.e-btn-group {
margin: 25px 5px 20px 20px;
}
</style>
ButtonGroup with SplitButton component nesting won’t works in vertical orientation.