Search results

How to

Initialize ButtonGroup using UTIL function

Though it is a CSS component, for easy initialization of ButtonGroup createButtonGroup util function can be used.

To use createButtonGroup util function, SplitButton dependencies should be configured and it should be added in system.config.js.

Using createButtonGroup method, the Button options, selector, and cssClass is passed and the corresponding classes is added to the elements.

For basic ButtonGroup

To create basic ButtonGroup, the target element along with the button elements needs to be created and createButtonGroup is to be imported from ej2-splitbuttons package.

For radio type ButtonGroup

To create a radio type ButtonGroup, the target element along with the input elements should be created with type radio.

For checkbox type ButtonGroup

Checkbox type ButtonGroup creation is similar to radio type ButtonGroup, instead the type of the input elements should be checkbox.

The following example illustrates how to create ButtonGroup using createButtonGroup function for basic, checkbox and radio type behavior.

{% tab template=‘button-group/getting-started’, isDefaultActive=true %}

<template>
  <div id='app'>
      <h5>Normal behavior</h5>
      <div id='basic'>
        <button></button>
        <button></button>
        <button></button>
      </div>
      <h5>Checkbox type behavior</h5>
      <div id='checkbox'>
        <input type="checkbox" id="checkbold" name="font" value='bold' />
        <input type="checkbox" id="checkitalic" name="font" value='italic' />
        <input type="checkbox" id="checkunderline" name="font" value='underline' />
      </div>
      <h5>Radiobutton type behavior</h5>
      <div id='radio'>
        <input type="radio" id="radioleft" name="align" value='left'/>
        <input type="radio" id="radiomiddle" name="align" value='middle'/>
        <input type="radio" id="radioright" name="align" value='right'/>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { createButtonGroup } from '@syncfusion/ej2-splitbuttons';
import { ButtonPlugin  } from '@syncfusion/ej2-vue-buttons';

Vue.use(ButtonPlugin);

export default {
  name: 'app',
  mounted() {
    createButtonGroup('#basic', {
      buttons: [
          { content: 'HTML' },
          { content: 'CSS' },
          { content: 'Javascript'}
      ]
  });

  createButtonGroup('#checkbox', {
      buttons: [
          { content: 'Bold' },
          { content: 'Italic' },
          { content: 'Undeline'}
      ]
  });

  createButtonGroup('#radio', {
      buttons: [
          { content: 'Left' },
          { content: 'Center' },
          { content: 'Right'}
      ]
  });
  }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css';

.e-btn-group {
  margin: 0 5px 5px 5px;
}
</style>

{% endtab %}

Create ButtonGroup with icons

To create ButtonGroup with icons, iconCss property of Button component can be used.

The following example illustrates how to create ButtonGroup with icons,

Source
Preview
app.vue
<template>
  <div id='app'>
    <div class="e-btn-group">
        <ejs-button content='Left' iconCss='e-icons e-left-icon'></ejs-button>
        <ejs-button content='Center' iconCss='e-icons e-middle-icon'></ejs-button>
        <ejs-button content='Right' iconCss='e-icons e-right-icon'></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;
  }
  .e-left-icon::before {
    content: '\ea9d';
  }

  .e-right-icon::before {
    content: '\e34d';
  }

  .e-middle-icon::before {
    content: '\e35e';
  }
</style>

Create ButtonGroup with rounded corner

The ButtonGroup with rounded corner has round edges on both sided. To ButtonGroup with rounded corner, e-round-corner class is to be added to the target element.

The following example illustrates how to create ButtonGroup with rounded corner,

Source
Preview
app.vue
<template>
  <div id='app'>
    <div class='e-btn-group e-round-corner'>
        <ejs-button content='HTML'></ejs-button>
        <ejs-button content='CSS'></ejs-button>
        <ejs-button content='Javascript'></ejs-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin  } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
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>

Enable RTL

ButtonGroup supports RTL functionality. This can be achieved by adding e-rtl class to the target element.

The following example illustrates how to create ButtonGroup with RTL support.

Source
Preview
app.vue
<template>
  <div id='app'>
    <div class='e-btn-group e-rtl'>
        <ejs-button content='HTML'></ejs-button>
        <ejs-button content='CSS'></ejs-button>
        <ejs-button content='Javascript'></ejs-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin  } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
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>

Disable

Particular Button

To disable a particular button in a ButtonGroup, disabled attribute needs to be added to corresponding button element.

Whole ButtonGroup

To disable whole ButtonGroup, disabled attribute needs to be added to all the button elements.

The following example illustrates how to disable the particular and the whole ButtonGroup.

Source
Preview
app.vue
<template>
  <div id='app'>
    <div class='e-btn-group'>
        <ejs-button >HTML</ejs-button>
        <ejs-button disabled='true'>CSS</ejs-button>
        <ejs-button >Javascript</ejs-button>
    </div>
    <div class='e-btn-group'>
        <ejs-button disabled='true'>HTML</ejs-button>
        <ejs-button disabled='true'>CSS</ejs-button>
        <ejs-button disabled='true'>Javascript</ejs-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin  } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
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>

To disable radio/checkbox type ButtonGroup, the disabled attribute should be added to the input element.

Enable ripple

Ripple can be enabled by importing rippleEffect method from ej2-base and initialize rippleEffect with .e-btn-group element and selector as e-btn.

The following example illustrates how to enable ripple for ButtonGroup,

Source
Preview
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';
import { enableRipple, rippleEffect } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(ButtonPlugin);

export default {
  name: 'app'
  mounted(){
    var button= document.querySelector('.e-btn-group');
    rippleEffect(button, { selector: '.e-btn' });
  }
}
</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>

Form submit

The name attribute of the input element is used to group checkbox/radio type ButtonGroup. When the radio/checkbox type are grouped in form, the checked items value attribute will be post to server on form submit that can be retrieved through the name. The disabled radio/checkbox type value will not be sent to the server on form submit.

In the following code snippet, the radio type ButtonGroup is explained with male value as checked. Now, the value that is in checked state will be sent on form submit.

Source
Preview
app.vue
<template>
  <div id='app'>
    <form>
        <div class='e-btn-group'>
            <input type="radio" id="male" name="gender" value="male" checked/>
            <label class="e-btn" for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female"/>
            <label class="e-btn" for="female">Female</label>
            <input type="radio" id="transgender" name="gender" value="transgender"/>
            <label class="e-btn" for="transgender">Transgender</label>
        </div>
        <ejs-button isPrimary='true'>Submit</ejs-button>
    </form>
  </div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin  } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
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, button {
   margin: 20px 5px 20px 20px;
  }
</style>

Show ButtonGroup selected state on initial render

To show selected state on initial render, checked property should to added to the corresponding input element.

The following example illustrates how to show selected state on initial render.

Source
Preview
app.vue
<template>
  <div id='app'>
    <div class='e-btn-group'>
        <input type="checkbox" id="checkbold" name="font" value="bold" checked/>
        <label class="e-btn" for="checkbold">Bold</label>
        <input type="checkbox" id="checkitalic" name="font" value="italic" />
        <label class="e-btn" for="checkitalic">Italic</label>
        <input type="checkbox" id="checkline" name="font" value="underline"/>
        <label class="e-btn" for="checkline">Underline</label>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';

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>