Getting Started

23 Mar 20233 minutes to read

This section explains how to create a simple ButtonGroup, and configure its available functionalities in Vue using Vue quickstart seed repository.

Prerequisites

System requirements for Syncfusion Vue UI components

Dependencies

The list of dependencies required to use the Button component in your application is given below:

|-- @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
```

To setup basic sample use the following Vue CLI commands.

  vue init webpack-simple quickstart

  cd quickstart

  npm install

Install Syncfusion ButtonGroup packages using below command.
```
  npm install @syncfusion/ej2-splitbuttons --save
```

Creating Vue Sample

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>

Adding CSS Reference

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>

Running the Application

Now run the npm run dev command in the console, it will build your application and open in the browser.

app.vue
<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>

Orientation

ButtonGroup can be arranged in vertical and horizontal orientation. By default, it is horizontally aligned.

Vertical Orientation

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,

app.vue
<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.