🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

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.activeBgIosstring'active:bg-ios-primary-shade'
colors.activeBgMaterialstring''
colors.bgIosstring'bg-primary'
colors.bgMaterialstring'bg-md-light-primary-container dark:bg-md-dark-primary-container'
colors.textIosstring'text-white'
colors.textMaterialstring'text-md-light-on-primary-container dark:text-md-dark-on-primary-container'
colors.touchRipplestring'touch-ripple-primary dark:touch-ripple-white'
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>
<k-page>
<k-navbar title="FAB" />
<!-- Right Top -->
<k-fab
class="fixed right-4-safe ios:top-15-safe material:top-18-safe z-20 k-color-brand-red"
>
<template #icon>
<component :is="PlusIcon" />
</template>
</k-fab>
<!-- Right Bottom -->
<k-fab class="fixed right-4-safe bottom-4-safe z-20">
<template #icon>
<component :is="PlusIcon" />
</template>
</k-fab>
<!-- Left Bottom -->
<k-fab class="fixed left-4-safe bottom-4-safe z-20 k-color-brand-green">
<template #icon>
<component :is="PlusIcon" />
</template>
</k-fab>
<!-- Left Top -->
<k-fab
class="fixed left-4-safe ios:top-15-safe material:top-18-safe z-20 k-color-brand-yellow"
>
<template #icon>
<component :is="PlusIcon" />
</template>
</k-fab>
<!-- Center Center -->
<k-fab
class="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20"
>
<template #icon>
<component :is="PlusIcon" />
</template>
</k-fab>
<!-- Center Bottom -->
<k-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>
</k-fab>
<k-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>
</k-block>
<k-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>
</k-block>
</k-page>
</template>
<script>
import { computed } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kFab,
useTheme,
} from 'konsta/vue';
import { Plus } from 'framework7-icons/vue';
import MdAdd from '../components/MdAdd.vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kFab,
},
setup() {
const theme = useTheme();
const PlusIcon = computed(() => (theme.value === 'ios' ? Plus : MdAdd));
return {
theme,
PlusIcon,
};
},
};
</script>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.