Positions in Vue Floating action button component
27 Feb 20237 minutes to read
The floating action button can be positioned anywhere on the target
using the position
property. If the target
is not defined, then FAB is positioned based on the browser viewport.
The position values of Floating Action Button are as follows:
- TopLeft
- TopCenter
- TopRight
- MiddleLeft
- MiddleCenter
- MiddleRight
- BottomLeft
- BottomCenter
- BottomRight
<template>
<!-- To render Floating Action Button in BottomLeft position -->
<ejs-fab id='fab' content='Add' position='BottomLeft'></ejs-fab>
</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>
Below example demonstrates different supported positions of FAB.
<template>
<div>
<div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
<!-- To render Floating Action Button in TopLeft position -->
<ejs-fab id="fab1" iconCss='fab-icons fab-icon-people' position='TopLeft' target='#target'></ejs-fab>
<!-- To render Floating Action Button in TopCenter position -->
<ejs-fab id="fab2" iconCss='fab-icons fab-icon-people' position='TopCenter' target='#target'></ejs-fab>
<!-- To render Floating Action Button in TopRight position -->
<ejs-fab id="fab3" iconCss='fab-icons fab-icon-people' position='TopRight' target='#target'></ejs-fab>
<!-- To render Floating Action Button in MiddleLeft position -->
<ejs-fab id="fab4" iconCss='fab-icons fab-icon-people' position='MiddleLeft' target='#target'></ejs-fab>
<!-- To render Floating Action Button in MiddleCenter position -->
<ejs-fab id="fab5" iconCss='fab-icons fab-icon-people' position='MiddleCenter' target='#target'></ejs-fab>
<!-- To render Floating Action Button in MiddleRight position -->
<ejs-fab id="fab6" iconCss='fab-icons fab-icon-people' position='MiddleRight' target='#target'></ejs-fab>
<!-- To render Floating Action Button in BottomLeft position -->
<ejs-fab id="fab7" iconCss='fab-icons fab-icon-people' position='BottomLeft' target='#target'></ejs-fab>
<!-- To render Floating Action Button in BottomCenter position -->
<ejs-fab id="fab8" iconCss='fab-icons fab-icon-people' position='BottomCenter' target='#target'></ejs-fab>
<!-- To render Floating Action Button in BottomRight position -->
<ejs-fab id="fab9" iconCss='fab-icons fab-icon-people' position='BottomRight' target='#target'></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';
.fab-container {
position: relative;
min-height: 310px;
min-width: 100%;
}
@font-face {
font-family: 'fab-icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="fab-icon-"],
[class*=" fab-icon-"] {
font-family: 'fab-icons' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fab-icon-people:before {
content: "\e70a";
}
</style>
Custom position
You can define the custom position of the Floating Action Button by override the top
, left
, right
, and bottom
CSS properties using cssClass
. For detailed information, refer app.vue
file below.
<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' cssClass='custom-position' 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';
.e-fab.e-btn.custom-position {
left: 40px;
top: 40px;
bottom: unset;
right: unset;
}
</style>