feat(demo): Add snackbar demo (#20)

demo/router/index.js

@@ -69,6 +69,10 @@ export default new VueRouter({
       path: '/select',
       component: () => import('views/SelectView')
     },
+    {
+      path: '/snackbar',
+      component: () => import('views/SnackbarView')
+    },
     {
       path: '/textfield',
       component: () => import('views/TextfieldView')

demo/store/modules/app.js

@@ -93,6 +93,12 @@ const state = {
       icon: 'code',
       reference: 'https://github.com/matsp/material-components-vue/tree/master/components/select'
     },
+    snackbar: {
+      text: 'Snackbar',
+      route: '/snackbar',
+      icon: 'code',
+      reference: 'https://github.com/matsp/material-components-vue/tree/master/components/snackbar'
+    },
     textfield: {
       text: 'Textfield',
       route: '/textfield',

demo/views/SnackbarView.vue

@@ -0,0 +1,64 @@
+<template>
+  <m-layout-grid-inner>
+    <m-layout-grid-cell :span="12">
+      <m-typo-title>Normal</m-typo-title>
+      <m-layout-grid-inner>
+        <m-layout-grid-cell :span="3">
+          <m-button
+            raised
+            interactive
+            @click="isSnackbarOpen=true">open</m-button>
+          <m-snackbar
+            :options="options"
+            v-model="isSnackbarOpen"/>
+        </m-layout-grid-cell>
+      </m-layout-grid-inner>
+    </m-layout-grid-cell>
+    <m-layout-grid-cell :span="12">
+      <m-typo-title>AlignStart</m-typo-title>
+      <m-layout-grid-inner>
+        <m-layout-grid-cell :span="2">
+          <m-button
+            raised
+            interactive
+            @click="isSnackbar2Open=true">open</m-button>
+          <m-snackbar
+            alignStart
+            :options="options"
+            v-model="isSnackbar2Open"/>
+        </m-layout-grid-cell>
+      </m-layout-grid-inner>
+    </m-layout-grid-cell>
+  </m-layout-grid-inner>
+</template>
+
+<script>
+import Vue from 'vue'
+import Button from '../../dist/button'
+import Snackbar from '../../dist/snackbar'
+
+Vue.use(Button)
+Vue.use(Snackbar)
+
+export default {
+  data () {
+    return {
+      isSnackbarOpen: false,
+      isSnackbar2Open: false,
+      options: {
+        message: 'I am a snackbar!',
+        timeout: 3000,
+        actionHandler: () => console.log('snackbar action'),
+        actionText: 'ok',
+        multiline: false,
+        actionOnBottom: false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../dist/button/styles";
+@import "../../dist/snackbar/styles";
+</style>