This section explains the available events in Floating Action Button component.
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>
import Vue from 'vue';
import { FabPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(FabPlugin);
export default {
methods: {
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>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.native="onClick"></ejs-fab>
</template>
<script>
import Vue from 'vue';
import { FabPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(FabPlugin);
export default {
methods: {
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.
<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.native="onClick" target='#targetElement'>
</ejs-fab>
</div>
</template>
<script>
import Vue from 'vue';
import { FabPlugin } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(FabPlugin);
export default {
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>