Events in Vue Floating action button component

11 Jun 20243 minutes to read

This section explains the available events in Floating Action Button component.

created

Event triggers after the creation of Floating Action Button.

<template>
        <!-- To render Floating Action Button -->
        <ejs-fab id='fab' iconCss='e-icons e-edit' content='Edit' :created="onCreate"></ejs-fab>
</template>

<script setup>
    import { FabComponent as EjsFab } from "@syncfusion/ej2-vue-buttons";
            const onCreate = function () {
                //Your required action here
            }
</script>

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

onclick

Event triggers when the Floating Action Button is clicked.

<template>
        <!-- To render Floating Action Button -->
        <ejs-fab id='fab' iconCss='e-icons e-edit' content='Edit' v-on:click="onClick"></ejs-fab>
</template>

<script setup>
    import { FabComponent as EjsFab } from "@syncfusion/ej2-vue-buttons";
            const onClick = function () {
                //Your required action here
            }
</script>

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

Below example demonstrates the click event of the Floating Action Button.

Composition API (~/src/App.vue)

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <!-- To render Floating Action Button -->
        <ejs-fab id='fab' iconCss='e-icons e-edit' content='Edit' v-on:click="onClick" target='#targetElement'>
        </ejs-fab>
    </div>
</template>

<script setup>

import { FabComponent as EjsFab } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);


const onClick = () => {
    alert("Edit is clicked!");
}

</script>

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

Options API (~/src/App.vue)

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <!-- To render Floating Action Button -->
        <ejs-fab id='fab' iconCss='e-icons e-edit' content='Edit' v-on:click="onClick" target='#targetElement'>
        </ejs-fab>
    </div>
</template>

<script>

import { FabComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
    name: "App",
    components: {
        "ejs-fab": FabComponent
    },
    methods: {
        onClick: function () {
            alert("Edit is clicked!");
        }
    }
}

</script>

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