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

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.

Floating Action Button Svelte component represents Floating Action Button element.

FAB Components

There are following components included:

FAB Properties

PropTypeDefaultDescription
<Fab> properties
hrefstring
boolean
URL of the page to load (if set). Will set href attribute on main FAB link. In case of boolean href="false" it won't add href tag
targetstringValue of link target attribute, e.g. _blank, _self, etc.
positionstringright-bottomFAB position. Can be one of the following:
  • right-bottom
  • center-bottom
  • left-bottom
  • right-center
  • center-center
  • left-center
  • right-top
  • center-top
  • left-top
morphTostringString CSS selector of the FAB morph target
textstringFAB Button text. If specified, then it will be displayed as Extended Fab with text label
tooltipstringFAB tooltip text to show on button hover/press
tooltipTriggerstringhoverDefines how to trigger (open) Tooltip. Can be hover, click or manual
<FabButtons> properties
positionstringtopSpeed dial buttons position, can be one of the following:
  • top - buttons will appear on top of FAB
  • right - buttons will appear on right of FAB
  • bottom - buttons will appear on bottom of FAB
  • left - buttons will appear on left of FAB
  • center - buttons will appear around of FAB
<FabButton> properties
fabClosebooleanfalseWhen enabled then clicking on this button will close the FAB
targetstringValue of link target attribute, e.g. _blank, _self, etc.
labelstringButton text label
tooltipstringButton tooltip text to show on button hover/press
tooltipTriggerstringhoverDefines how to trigger (open) Tooltip. Can be hover, click or manual

FAB Events

EventDescription
<Fab> events
clickEvent will be triggered after click on FAB
<FabButton> events
clickEvent will be triggered after click on FAB Speed Dial button

FAB Slots

FAB Svelte component (<Fab>) has additional slots for custom elements:

Examples

fab.svelte
<script>
  import { Navbar, Page, Block, Fab, FabButton, FabButtons, Icon } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Floating Action Button" />

  <Fab position="right-top">
    <Icon ios="f7:add" md="material:add" />
    <Icon ios="f7:close" md="material:close" />
    <FabButtons position="left">
      <FabButton>1</FabButton>
      <FabButton>2</FabButton>
      <FabButton>3</FabButton>
    </FabButtons>
  </Fab>

  <Fab position="right-bottom">
    <Icon ios="f7:add" md="material:add" />
    <Icon ios="f7:close" md="material:close" />
    <FabButtons position="top">
      <FabButton label="Action 1">1</FabButton>
      <FabButton label="Action 2">2</FabButton>
      <FabButton label="Third Action">3</FabButton>
    </FabButtons>
  </Fab>

  <Fab position="left-bottom">
    <Icon ios="f7:add" md="material:add" />
    <Icon ios="f7:close" md="material:close" />
    <FabButtons position="top">
      <FabButton>1</FabButton>
      <FabButton>2</FabButton>
      <FabButton>3</FabButton>
    </FabButtons>
  </Fab>

  <Fab position="left-top">
    <Icon ios="f7:add" md="material:add" />
    <Icon ios="f7:close" md="material:close" />
    <FabButtons position="bottom">
      <FabButton>1</FabButton>
      <FabButton>2</FabButton>
      <FabButton>3</FabButton>
    </FabButtons>
  </Fab>

  <Fab position="center-center">
    <Icon ios="f7:add" md="material:add" />
    <Icon ios="f7:close" md="material:close" />
    <FabButtons position="center">
      <FabButton>1</FabButton>
      <FabButton>2</FabButton>
      <FabButton>3</FabButton>
      <FabButton>4</FabButton>
    </FabButtons>
  </Fab>

  <Fab position="center-bottom" text="Create">
    <Icon ios="f7:add" md="material:add" />
  </Fab>

  <Block>
    <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>
    <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>

FAB Morph

fab-morph.svelte
<script>
  import { Navbar, Page, BlockTitle, Block, Fab, Link, Toolbar, Icon } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="Floating Action Button Morph" />
  <Toolbar tabbar icons bottom class="fab-morph-target">
    <Link tabLink tabLinkActive iconIos="f7:envelope_fill" iconMd="material:email" text="Inbox" />
    <Link tabLink iconIos="f7:calendar_fill" iconMd="material:today" text="Calendar" />
    <Link tabLink iconIos="f7:cloud_upload_fill" iconMd="material:file_upload" text="Upload" />
  </Toolbar>
  <Fab position="right-bottom" morphTo=".toolbar.fab-morph-target">
    <Icon ios="f7:plus" md="material:add" />
  </Fab>
  <Fab position="left-bottom" morphTo=".demo-fab-sheet.fab-morph-target">
    <Icon ios="f7:plus" md="material:add" />
  </Fab>
  <Fab position="center-bottom" morphTo=".demo-fab-fullscreen-sheet.fab-morph-target">
    <Icon ios="f7:plus" md="material:add" />
  </Fab>
  <svelte:fragment slot="fixed">
    <div class="list links-list demo-fab-sheet fab-morph-target">
      <ul>
        <li><a class="fab-close">Link 1</a></li>
        <li><a class="fab-close">Link 2</a></li>
        <li><a class="fab-close">Link 3</a></li>
        <li><a class="fab-close">Link 4</a></li>
      </ul>
    </div>
    <div class="demo-fab-fullscreen-sheet fab-morph-target">
      <BlockTitle>Choose Something</BlockTitle>
      <div class="list links-list">
        <ul>
          <li><a class="fab-close">Link 1</a></li>
          <li><a class="fab-close">Link 2</a></li>
          <li><a class="fab-close">Link 3</a></li>
          <li><a class="fab-close">Link 4</a></li>
        </ul>
      </div>
    </div>
  </svelte:fragment>

  <Block>
    <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>
    <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>