New animations & possibility to modify main icon

- zoomIn animation when actions appear
- Main Icon can be modified now (after rotating the X will appear).

Author: hazzo

README.md

@@ -39,6 +39,7 @@ And
 |  `z-index`            | String    | <b>Default '999'</b> <br>Set any value that suits your needs.  |
 |  `ripple-show`        | Boolean   | <b>Default true</b> <br>Options: true or false.  |
 |  `ripple-color`       | String    | <b>Default 'light'</b> <br>Options: 'light' or 'dark'.  |
+|  `main-icon`       | String    | <b>Default 'add'</b> <br>Use icons from the material icon library.  |
 |  `actions`            | Object    | Has <b>two properties</b>:   <br> -`name` (String) Name of the event. <br> -`icon`(String) Icon name. (Please refer to [Material icons](https://material.io/icons/))|
 
 

demo/App.vue

@@ -25,6 +25,10 @@
                                 <hr class="is-marginless">
                                 <h2 class="subtitle text-light-grey" style="margin-top: .5rem">
                                     A Vue Component
+                                    <span class="is-pulled-right">
+                                        <!-- Place this tag where you want the button to render. -->
+<a class="github-button" href="https://github.com/PygmySlowLoris/vue-fab" data-icon="octicon-star" data-size="large" aria-label="Star PygmySlowLoris/vue-fab on GitHub">Star</a>
+                                    </span>
                                 </h2>
                             </div>
                         </div>
@@ -48,7 +52,7 @@
                             </div>
                             <div class="content">
                                 <div class="columns">
-                                    <div class="column">
+                                    <div class="column is-5" style="display: flex; justify-content: center">
                                         <div class="field is-pulled-left">
                                             <label class="label">Color</label>
                                             <p class="control">
@@ -57,20 +61,29 @@
                                         </div>
                                     </div>
                                     <div class="column">
+                                        <div class="field has-text-left">
+                                            <label class="label">Position</label>
+                                            <p class="control">
+                                                <span class="select">
+                                                  <select v-model="position">
+                                                    <option v-for="pos in positions">{{pos}}</option>
+                                                  </select>
+                                                </span>
+                                            </p>
+                                        </div>
                                         <div class="field">
-                                            <label class="label is-pulled-left">Position</label>
-                                            <br/>
+                                            <label class="label is-pulled-left">Main Icon</label>
                                             <p class="control">
-                                            <span class="select">
-                                              <select v-model="position">
-                                                <option v-for="pos in positions">{{pos}}</option>
-                                              </select>
-                                            </span>
+                                                <input type="text" class="input" v-model="mainIcon">
                                             </p>
+                                        </div>
+                                        <div class="field">
                                             <label class="label is-pulled-left">First Icon</label>
                                             <p class="control">
                                                 <input type="text" class="input" v-model="firstIcon">
                                             </p>
+                                        </div>
+                                        <div class="field">
                                             <label class="label is-pulled-left">Second Icon</label>
                                             <p class="control">
                                                 <input type="text" class="input" v-model="secondIcon">
@@ -107,6 +120,7 @@
         <fab
                 :position="position"
                 :bg-color="colors.hex"
+                :main-icon="mainIcon"
                 :actions="[{name: 'alertMe',icon: firstIcon},{name: 'alertMe',icon: secondIcon}]"
                 @alertMe="alert"
         ></fab>
@@ -161,9 +175,9 @@
                 ],
                 position: 'bottom-right',
                 colors: defaultProps,
+                mainIcon: 'add',
                 firstIcon: 'cached',
                 secondIcon: 'add_alert'
-
             }
         },
         methods: {

index.html

@@ -9,5 +9,6 @@
   <body>
     <div id="app"></div>
     <script src="./dist/build.js"></script>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
   </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-fab",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Vue Floating Action Button",
   "main": "src/index.js",
   "repository": {

src/FAB.vue

@@ -7,25 +7,34 @@
                         :leave-active-class="transitionLeave"
             >
                 <ul v-show="toggle" class="fab-list">
-                    <li v-for="action in actions" :style="{ 'background-color': bgColor }"
-                        @click="toParent(action.name)" class="pointer">
-                        <i class="material-icons">{{action.icon}}</i>
-                    </li>
+                    <template v-for="action in actions">
+                        <transition
+                                enter-active-class="animated quick zoomIn"
+                                leave-active-class="animated quick zoomOut"
+                        >
+                            <li v-if="toggle" :style="{ 'background-color': bgColor }"
+                                @click="toParent(action.name)" class="pointer">
+                                <i class="material-icons">{{action.icon}}</i>
+                            </li>
+                        </transition>
+                    </template>
                 </ul>
             </transition>
         </div>
         <template v-if="rippleShow">
             <div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
                  class="fab pointer" :style="{ 'background-color': bgColor }"
             >
-                <i class="material-icons md-36" :class="{ rotate: toggle }">add</i>
+                <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
+                <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
             </div>
         </template>
         <template v-else>
             <div @click="toggle = !toggle"
                  class="fab pointer" :style="{ 'background-color': bgColor, 'z-index': zIndex }"
             >
-                <i class="material-icons md-36" :class="{ rotate: toggle }">add</i>
+                <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
+                <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
             </div>
         </template>
     </div>
@@ -60,6 +69,9 @@
             rippleColor: {
                 default: 'light'
             },
+            mainIcon: {
+                default: 'add'
+            },
             actions: {}
         },
         computed: {
@@ -87,13 +99,13 @@
             animation() {
                 if (this.position === 'top-right' || this.position === 'top-left') {
                     return {
-                        enter: 'animated fadeInDown',
-                        leave: 'animated fadeOutUp'
+                        enter: 'animated quick fadeInDown',
+                        leave: 'animated quick fadeOutUp'
                     };
                 } else if (this.position === 'bottom-right' || this.position === 'bottom-left') {
                     return {
-                        enter: 'animated fadeInUp',
-                        leave: 'animated fadeOutDown'
+                        enter: 'animated quick fadeInUp',
+                        leave: 'animated quick fadeOutDown'
                     };
                 } else {
                     return {
@@ -165,6 +177,11 @@
 </script>
 
 <style scoped>
+    .animated.quick {
+        -webkit-animation-duration: .7s !important;
+        animation-duration: .7s !important;
+    }
+
     .fab-wrapper {
         position: fixed;
         z-index: 999;
@@ -190,10 +207,34 @@
         margin: 0px auto;
     }
 
-    .fab .material-icons.rotate {
+    .fab .material-icons.main {
+        opacity: 1;
+        position: absolute;
+        left: .9rem;
+    }
+
+    .fab .material-icons.close {
+        opacity: 0;
+        position: absolute;
+        left: .9rem;
+    }
+
+    .fab .material-icons.main.rotate {
+        -ms-transform: rotate(315deg); /* IE 9 */
+        -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
+        transform: rotate(315deg);
+        opacity: 0;
+        -webkit-transition: opacity .3s ease-in, -webkit-transform .4s; /* Safari */
+        transition: opacity .3s ease-in, transform .4s;
+    }
+
+    .fab .material-icons.close.rotate {
         -ms-transform: rotate(315deg); /* IE 9 */
         -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
         transform: rotate(315deg);
+        opacity: 1;
+        -webkit-transition: opacity .3s ease-in, -webkit-transform .4s; /* Safari */
+        transition: opacity .3s ease-in, transform .4s;
     }
 
     .fab-list {