Floating Action Button Svelte 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

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

onClickfunction(e)

click event handler

Fab Slots

NameDescription
icon

Fab's icon

text

Button text (content)

Examples

Fab.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Block,
Fab,
useTheme,
} from 'konsta/svelte';
import { Plus } from 'framework7-icons/svelte';
import MdAdd from '../components/MdAdd.svelte';
$: theme = useTheme((newValue) => (theme = newValue));
$: PlusIcon = theme === 'ios' ? Plus : MdAdd;
</script>
<Page>
<Navbar title="FAB" />
<!-- Right Top -->
<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' }}
>
<svelte:component this={PlusIcon} slot="icon" />
</Fab>
<!-- Right Bottom -->
<Fab class="fixed right-4-safe bottom-4-safe z-20">
<svelte:component this={PlusIcon} slot="icon" />
</Fab>
<!-- Left Bottom -->
<Fab
class="fixed left-4-safe bottom-4-safe z-20"
colors={{ bg: 'bg-green-500', activeBg: 'active:bg-green-600' }}
>
<svelte:component this={PlusIcon} slot="icon" />
</Fab>
<!-- Left Top -->
<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' }}
>
<svelte:component this={PlusIcon} slot="icon" />
</Fab>
<!-- Center Center -->
<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' }}
>
<svelte:component this={PlusIcon} slot="icon" />
</Fab>
<!-- Center Bottom -->
<Fab
class="fixed left-1/2 bottom-4-safe transform -translate-x-1/2 z-20"
text="Create"
t
extPosition="after"
><svelte:component this={PlusIcon} slot="icon" />
</Fab>
<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>
</Block>
<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>
</Block>
</Page>
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.