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

matsp · Apr 17, 2018 · d55aeb5 · d55aeb5
1 parent f1d20a2
commit d55aeb5
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 0 deletions.
diff --git a/demo/router/index.js b/demo/router/index.js
@@ -57,6 +57,10 @@ export default new VueRouter({
       path: '/list',
       component: () => import('views/ListView')
     },
+    {
+      path: '/menu',
+      component: () => import('views/MenuView')
+    },
     {
       path: '/radio',
       component: () => import('views/RadioView')

diff --git a/demo/store/modules/app.js b/demo/store/modules/app.js
@@ -75,6 +75,12 @@ const state = {
       icon: 'code',
       reference: 'https://github.com/matsp/material-components-vue/tree/master/components/list'
     },
+    list: {
+      text: 'Menu',
+      route: '/menu',
+      icon: 'code',
+      reference: 'https://github.com/matsp/material-components-vue/tree/master/components/menu'
+    },
     radio: {
       text: 'Radio',
       route: '/radio',

diff --git a/demo/views/MenuView.vue b/demo/views/MenuView.vue
@@ -0,0 +1,72 @@
+<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="4">
+          <m-menu-anchor>
+            <m-button raised interactive @click="isMenuOpen=true">open</m-button>
+              <m-menu v-model="isMenuOpen">
+                <m-list>
+                  <m-list-item interactive>
+                      Entry 1
+                  </m-list-item>
+                  <m-list-divider/>
+                  <m-list-item interactive>
+                      Entry 2
+                  </m-list-item>
+                </m-list>
+              </m-menu>
+          </m-menu-anchor>
+        </m-layout-grid-cell>
+      </m-layout-grid-inner>
+    </m-layout-grid-cell>
+    <m-layout-grid-cell :span="12">
+      <m-typo-title>QuickOpen</m-typo-title>
+      <m-layout-grid-inner>
+        <m-layout-grid-cell :span="4">
+          <m-menu-anchor>
+            <m-button raised interactive @click="isMenu2Open=true">open</m-button>
+              <m-menu quickOpen v-model="isMenu2Open">
+                <m-list>
+                  <m-list-item interactive>
+                      Entry 1
+                  </m-list-item>
+                  <m-list-divider/>
+                  <m-list-item interactive>
+                      Entry 2
+                  </m-list-item>
+                </m-list>
+              </m-menu>
+          </m-menu-anchor>
+        </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 List from '../../dist/list'
+import Menu from '../../dist/menu'
+
+Vue.use(Button)
+Vue.use(List)
+Vue.use(Menu)
+
+export default {
+  data () {
+    return {
+      isMenuOpen: false,
+      isMenu2Open: false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../dist/button/styles";
+@import "../../dist/list/styles";
+@import "../../dist/menu/styles";
+</style>