Skip to content

Material Design Floating Action Button (AKA Fab) which reacts on scrolling events. Becomes visible when an attached target is scrolled up and invisible when scrolled down.

License

Notifications You must be signed in to change notification settings

bilalrazamoon/ion-fab

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<ion-fab>

FAB floating action button which reacts on scrolling events. Becomes visible when an attached target is scrolled up and invisible when scrolled down.

Usage

Include ion-fab.css and ion-fab.js after the rest of your Ionic and Angular includes and add the fabDirective module to your configuration. Then use the following AngularJS directives:

    <!-- scrollable element -->
    <div fab-scroll-container>
    </div>
    <!-- ion-fab directive must be after scrollable element -->
    <ion-fab>
        ...
    </ion-fab>

Options

disabled live displace (move) - default true - type boolean

    <ion-fab live-displace="false">
        ...
    </ion-fab>

set animation - default fade if live-displace="false", available animations; zoom, fade and rotate.

    <ion-fab animation="zoom">
        ...
    </ion-fab>

About

Material Design Floating Action Button (AKA Fab) which reacts on scrolling events. Becomes visible when an attached target is scrolled up and invisible when scrolled down.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published