Types and styles in Vue Button group component
8 Aug 20233 minutes to read
This section explains about different types and styles of ButtonGroup.
ButtonGroup types
Outline ButtonGroup
An Outline ButtonGroup has a border with transparent background. To create Outline ButtonGroup, e-outline
class needs to be added to the target element and to the button element using cssClass
property.
The following sample illustrates how to achieve outline ButtonGroup,
<template>
<div id='app'>
<div class="e-btn-group e-outline">
<ejs-button cssClass='e-outline'>HTML</ejs-button>
<ejs-button cssClass='e-outline' >CSS</ejs-button>
<ejs-button cssClass='e-outline' >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 does not have support for
flat
andround
types.
ButtonGroup styles
The Essential JS 2 ButtonGroup has the following predefined styles. This can be achieved by adding corresponding class name in each button elements using cssClass
property.
Class | Description |
---|---|
e-primary | Used to represent a primary action. |
e-success | Used to represent a positive action. |
e-info | Used to represent an informative action. |
e-warning | Used to represent an action with caution. |
e-danger | Used to represent a negative action. |
The following example illustrates how to achieve predefined styles in ButtonGroup,
<template>
<div id='app'>
<div class="e-btn-group">
<ejs-button cssClass='e-info'>View</ejs-button>
<ejs-button>Edit</ejs-button>
<ejs-button cssClass='e-danger'>Delete</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>