Material Design FAB Speed Dial

Brad Martin's FAB button.

  •         
     <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
          xmlns:FAB="nativescript-floatingactionbutton"
           xmlns:Gif="nativescript-gif">
        <Page.actionBar>
            <ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
        </Page.actionBar>
        <grid-layout rows="auto,*">
            <list-view id="userList" row="1" items="">
                <list-view.itemTemplate>
                    <label text="" textWrap="true" fontSize="15" margin="20" />
                </list-view.itemTemplate>
            </list-view>
            
     <image tap="doThis" id="btna" src="~/pics/brad.PNG" class="speed-button" row="1" />
     <image tap="doThis" id="btnb" src="~/pics/walker.jpeg" class="speed-button" row="1" />
     <image tap="doThis" id="btnc" src="~/pics/nraboy.png" class="speed-button" row="1" />
     <image tap="doThis" id="btnd" src="~/pics/jenlooper.jpeg" class="speed-button" row="1" />
     <image tap="doThis" id="btne" src="~/pics/burke.jpg" class="speed-button" row="1" />
     <Gif:Gif tap="doThis" id="btnf" src="~/pics/june.gif" class="speed-button" row="1" />        
                <FAB:fab
                    row="1"
                    icon="res://icon"
                    tap="fabTap"
                    rippleColor="#fff"
                    class="fab-button"  /> 
                    
        </grid-layout>
    </Page>
            
          
  •         
     .fab-button {
        height: 70;
        margin: 15;
        background-color: #ff4081; 
        horizontal-align: right; 
        vertical-align: bottom; 
    }
    
    .speed-button {
        height: 40;
        width:40;
        margin: 22;
        background-color: transparent;
        color: #fff;
        opacity: 0;
        border-radius: 20;
        horizontal-align: right; 
        vertical-align: bottom; 
    }
    
            
          
  •         var isFabOpen = false;
    
    function fabTap(args) {
        var fab = args.object;
        var button = page.getViewById('btna');
        var button2 = page.getViewById('btnb');
        var button3 = page.getViewById('btnc');
        var button4 = page.getViewById('btnd');
        var button5 = page.getViewById('btne');
        var button6 = page.getViewById('btnf');
    
    
        if (isFabOpen === true) {
    
            var animations = [
                { target: fab, rotate: 0, duration: 400, delay: 0 },
                { target: button, translate: { x: 0, y: 0 }, opacity: 0, duration: 400, delay: 0 },
                { target: button2, translate: { x: 0, y: 0 }, opacity: 0, duration: 440, delay: 0 },
                { target: button3, translate: { x: 0, y: 0 }, opacity: 0, duration: 440, delay: 0 },
                { target: button4, translate: { x: 0, y: 0 }, opacity: 0, duration: 440, delay: 0 },
                { target: button5, translate: { x: 0, y: 0 }, opacity: 0, duration: 440, delay: 0 },
                { target: button6, translate: { x: 0, y: 0 }, opacity: 0, duration: 440, delay: 0 }
    
            ];
            var a = new animation.Animation(animations);
            a.play()
                .then(function () {
                    //console.log("Animations finished");
                    isFabOpen = false;
                })
                .catch(function (e) {
                    console.log(e.message);
                });
    
        } else {
    
            var animations = [
                { target: fab, rotate: 45, duration: 400, delay: 0 },
                { target: button, translate: { x: 0, y: -54 }, opacity: 1, duration: 400, delay: 0 },
                { target: button2, translate: { x: 0, y: -100 }, opacity: 1, duration: 440, delay: 0 },
                { target: button3, translate: { x: 0, y: -154 }, opacity: 1, duration: 440, delay: 0 },
                { target: button4, translate: { x: 0, y: -200 }, opacity: 1, duration: 440, delay: 0 },
                { target: button5, translate: { x: 0, y: -254 }, opacity: 1, duration: 440, delay: 0 },
                { target: button6, translate: { x: 0, y: -300 }, opacity: 1, duration: 440, delay: 0 }
            ];
            var a = new animation.Animation(animations);
            a.play()
                .then(function () {
                    //console.log("Animations finished");
                    isFabOpen = true;
                })
                .catch(function (e) {
                    console.log(e.message);
                });
        }
    }
    exports.fabTap = fabTap;