Floating Action Button Vue Component

Floating action buttons (FABs) are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

FAB Components

There are following components included:

  • Fab - main FAB element

Fab Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.activeBgstring'active:bg-primary-dark'

FAB pressed bg color

colors.bgstring'bg-primary'

FAB bg color

colors.textstring'text-white'

FAB text color

componentstring'a'

Component's HTML Element

hrefstring

Fab's link href attribute

textstring

Button text (content)

textPosition'after' | 'before''after'

Text position, can be after icon or before icon

touchRipplebooleantrue

Enables touch ripple effect in Material theme

Fab Slots

NameDescription
icon

Fab's icon

text

Button text (content)

Examples

Fab.vue
<template>
<twm-page>
<twm-navbar title="FAB" />
<!-- Right Top -->
<twm-fab
class="fixed right-4-safe ios:top-15-safe material:top-18-safe z-20"
:colors="{ bg: 'bg-red-500', activeBg: 'active:bg-red-600' }"
>
<template #icon>
<component :is="PlusIcon" />
</template>
</twm-fab>
<!-- Right Bottom -->
<twm-fab class="fixed right-4-safe bottom-4-safe z-20">
<template #icon>
<component :is="PlusIcon" />
</template>
</twm-fab>
<!-- Left Bottom -->
<twm-fab
class="fixed left-4-safe bottom-4-safe z-20"
:colors="{ bg: 'bg-green-500', activeBg: 'active:bg-green-600' }"
>
<template #icon>
<component :is="PlusIcon" />
</template>
</twm-fab>
<!-- Left Top -->
<twm-fab
class="fixed left-4-safe ios:top-15-safe material:top-18-safe z-20"
:colors="{ bg: 'bg-yellow-500', activeBg: 'active:bg-yellow-600' }"
>
<template #icon>
<component :is="PlusIcon" />
</template>
</twm-fab>
<!-- Center Center -->
<twm-fab
class="
fixed
left-1/2
top-1/2
transform
-translate-x-1/2 -translate-y-1/2
z-20
"
:colors="{ bg: 'bg-pink-500', activeBg: 'active:bg-pink-600' }"
>
<template #icon>
<component :is="PlusIcon" />
</template>
</twm-fab>
<!-- Center Bottom -->
<twm-fab
class="fixed left-1/2 bottom-4-safe transform -translate-x-1/2 z-20"
text="Create"
text-position="after"
><template #icon>
<component :is="PlusIcon" />
</template>
</twm-fab>
<twm-block class="space-y-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem
beatae, delectus eligendi est saepe molestias perferendis suscipit,
commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.
</p>
<p>
Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a,
quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores
ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam
unde.
</p>
<p>
Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam,
exercitationem dolores odio sapiente provident. Accusantium id, itaque
aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem
sequi facere quas quidem magnam reprehenderit.
</p>
<p>
Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi
consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae
facere voluptates atque similique odit mollitia, rerum placeat nobis
est.
</p>
<p>
Et impedit soluta minus a autem adipisci cupiditate eius dignissimos
nihil officia dolore voluptatibus aperiam reprehenderit esse facilis
labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio
assumenda veniam, ipsum alias.
</p>
</twm-block>
<twm-block class="space-y-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa
debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus,
tempora quia quos voluptatibus corporis officia at quas dolorem earum!
</p>
<p>
Quod soluta eos inventore magnam suscipit enim at hic in maiores
temporibus pariatur tempora minima blanditiis vero autem est
perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut
odit aliquam adipisci.
</p>
<p>
Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam
aperiam, animi fuga veritatis consectetur, voluptatibus atque
consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci
sint, iusto blanditiis ullam? Vel?
</p>
<p>
Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis
temporibus consequatur expedita eaque aliquid quos accusamus fugiat id
iusto autem obcaecati repellat fugit cupiditate suscipit natus quas
doloribus? Temporibus necessitatibus, libero.
</p>
<p>
Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae
obcaecati possimus, labore excepturi reprehenderit consectetur
perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur
in eveniet, deleniti recusandae omnis eum quas?
</p>
<p>
Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda
quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam,
recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde
deleniti quisquam, nobis?
</p>
<p>
Atque qui quaerat quasi officia molestiae, molestias totam incidunt
reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam
obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum
esse recusandae voluptatibus eligendi.
</p>
</twm-block>
</twm-page>
</template>
<script>
import { computed } from 'vue';
import {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmBlock,
twmFab,
useTheme,
} from 'tailwind-mobile/vue';
import { Plus } from 'framework7-icons/vue';
import MdAdd from '../components/MdAdd.vue';
export default {
components: {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmBlock,
twmFab,
},
setup() {
const theme = useTheme();
const PlusIcon = computed(() => (theme.value === 'ios' ? Plus : MdAdd));
return {
theme,
PlusIcon,
};
},
};
</script>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.