Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
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>