Floating Action Button React 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.

There are following components included:

• / F7Fab - main FAB element
• FabButtons / F7FabButtons - wrapper for multiple FAB buttons used as Speed Dial FAB
• FabButton / F7FabButton - single FAB Speed Dial button
• FabBackdrop / F7FabBackdrop - FAB backdrop element

• default - child element will be inserted inside of the main FAB link <a> element. But if the child is FabButtons, then it will be inserted in the end of the main FAB element
• link - child element will be inserted inside of the main FAB link <a> element
• root - child element will be inserted in the end of the main FAB element
• - child element will be inserted in the text element of the Extended FAB

With Backdrop

export default () => (
  <Page>
    <Navbar title="FAB Backdrop" />
    {/* FAB Backdrop */}
    {/* FAB Right Bottom */}
    <Fab position="right-bottom" slot="fixed">
      <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
      <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
      <FabButtons position="top">
        <FabButton label="Action 1">1</FabButton>
        <FabButton label="Action 2">2</FabButton>
      </FabButtons>
    </Fab>
    <Block>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias ... voluptatibus eligendi.</p>
    </Block>
)