Getting Started with Vue Floating Action Button Component
27 Feb 20234 minutes to read
This section explains how to create a simple Floating Action Button and demonstrate the basic usage of the Floating Action Button component in an Vue environment.
Prerequisites
System requirements for Syncfusion Vue UI components
Dependencies
The list of dependencies required to use the Floating Action Button component in your application is given as follows:
|-- @syncfusion/ej2-vue-buttons
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-vue-base
Installation and Configuration
You can use Vue CLI
to setup your Vue applications.
To install Vue CLI use the following command.
npm install -g @vue/cli
npm install -g @vue/cli-init
Start a new project using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
Install Syncfusion Floating Action Button
packages using below command.
npm install @syncfusion/ej2-vue-buttons --save
Registering Floating Action Button Component using Vue.use()
Import the Floating Action Button Plugin from the Essential JS 2 Vue package and register the same using Vue.use()
with Component Plugin as its argument.
Refer to the code snippet given below.
import Vue from 'vue';
import { FabPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(FabPlugin );
export default {}
By registering component plugin in Vue, all child directives are also globally registered. We can also use
Vue.Component()
to registerFloating Action Button
. Refer here to know more about component registration.
Initialize Floating Action Button
Add the EJ2 Vue Floating Action Button using <ejs-fab>
to the <template>
section of the App.vue
file in src
directory.
<template>
<ejs-fab id='fab'></ejs-fab>
</template>
<script>
import Vue from 'vue';
import { FabPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(FabPlugin);
export default {}
</script>
Adding CSS reference
Add Floating Action Button component’s styles as given below in <style>
section of the App.vue
file.
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
Run the application
Now run the npm run dev
command in the console, it will build your application and open in the browser.
The following example shows a basic Floating Action Button component.
<template>
<div>
<div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
<!-- To render Floating Action Button -->
<ejs-fab id='fab' content='Add' 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 {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
Click event
The floating action button control triggers the onclick
event when you click on the floating action button. You can use this event to perform the required action.
<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>