feat: Adding fab demo

demo/router/index.js

@@ -29,6 +29,10 @@ export default new VueRouter({
       path: '/elevation',
       component: () => import('views/ElevationView')
     },
+    {
+      path: '/fab',
+      component: () => import('views/FabView')
+    },
     {
       path: '/iconToggle',
       component: () => import('views/IconToggleView')

demo/store/modules/app.js

@@ -30,6 +30,11 @@ const state = {
       route: '/elevation',
       icon: 'code'
     },
+    fab: {
+      text: 'Fab',
+      route: '/fab',
+      icon: 'code'
+    },
     iconToggle: {
       text: 'IconToggle',
       route: '/iconToggle',

demo/views/FabView.vue

@@ -0,0 +1,33 @@
+<template>
+    <m-layout-grid-inner>
+        <m-layout-grid-cell :span="12">
+            <m-typo-display :level="1">Fab</m-typo-display>
+            <m-typo-body :level="2">
+                <a href="https://github.com/matsp/material-components-vue/blob/master/components/Fab">
+                    https://github.com/matsp/material-components-vue/blob/master/components/Fab
+                </a>
+            </m-typo-body>
+        </m-layout-grid-cell>
+        <m-layout-grid-cell :span="2">
+            <m-typo-headline>Normal</m-typo-headline>
+            <m-fab icon="add" interactive />
+        </m-layout-grid-cell>
+        <m-layout-grid-cell :span="2">
+            <m-typo-headline>Mini</m-typo-headline>
+            <m-fab icon="add" mini interactive />
+        </m-layout-grid-cell>
+            <m-fab icon="add" absoluteRight interactive />
+    </m-layout-grid-inner>
+</template>
+
+<style>
+.surface {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 100px;
+  border-radius: 3px;
+  font-size: 0.8em;
+}
+</style>