Change caret icon in Vue Drop down button component

11 Jun 20244 minutes to read

Dropdown arrow can be customized on popup open and close. It can be handled in beforeOpen
and beforeClose event.

In the following example, the up arrow is updated on popup close and down arrow is updated on popup open using beforeOpen and beforeClose event by adding and removing e-caret-up class.

<template>
    <ejs-dropdownbutton id="ddBtn" :items='items' :beforeOpen='onBeforeOpen'
        :beforeClose='onBeforeClose'>Clipboard</ejs-dropdownbutton>
</template>

<script setup>

import { DropDownButtonComponent as EjsDropdownbutton } from "@syncfusion/ej2-vue-splitbuttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
const items = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    }]
// Removing 'e-caret-up' class.
const onBeforeClose = (args) => {
    document.getElementById('ddBtn').ej2_instances[0].cssClass = '';
}
// Adding 'e-caret-up' class.
const onBeforeOpen = (args) => {
    document.getElementById('ddBtn').ej2_instances[0].cssClass = 'e-caret-up';
}
</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';

.e-caret {
    transform: rotate(0deg);
    transition: transform 200ms ease-in-out;
}

.e-caret-up .e-caret {
    transform: rotate(180deg);
}
</style>
<template>
<ejs-dropdownbutton id="ddBtn" :items='items' :beforeOpen='onBeforeOpen' :beforeClose='onBeforeClose'>Clipboard</ejs-dropdownbutton>
</template>

<script>
import { DropDownButtonComponent } from "@syncfusion/ej2-vue-splitbuttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
export default {
name: "App",
components: {
"ejs-dropdownbutton":DropDownButtonComponent
},
    data () {
        return {
            items:[
            {
                text: 'Cut'
            },
            {
                text: 'Copy'
            },
            {
                text: 'Paste'
            }]
        };
    },
    methods: {
        // Removing 'e-caret-up' class.
        onBeforeClose: (args) => {
           document.getElementById('ddBtn').ej2_instances[0].cssClass = '';
        },
        // Adding 'e-caret-up' class.
        onBeforeOpen: (args) => {
            document.getElementById('ddBtn').ej2_instances[0].cssClass = 'e-caret-up';
        }
    }
}
</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';
    .e-caret {
        transform: rotate(0deg);
        transition: transform 200ms ease-in-out;
    }

    .e-caret-up .e-caret {
        transform: rotate(180deg);
    }
</style>