feat: Adding elevation demo

matsp · Nov 20, 2017 · d5055ba · d5055ba
1 parent 93b2b91
commit d5055ba
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/demo/router/index.js b/demo/router/index.js
@@ -25,6 +25,10 @@ export default new VueRouter({
       path: '/drawer',
       component: () => import('views/DrawerView')
     },
+    {
+      path: '/elevation',
+      component: () => import('views/ElevationView')
+    },
     {
       path: '/iconToggle',
       component: () => import('views/IconToggleView')

diff --git a/demo/store/modules/app.js b/demo/store/modules/app.js
@@ -25,6 +25,11 @@ const state = {
       route: '/drawer',
       icon: 'code'
     },
+    elevation: {
+      text: 'Elevation',
+      route: '/elevation',
+      icon: 'code'
+    },
     iconToggle: {
       text: 'IconToggle',
       route: '/iconToggle',

diff --git a/demo/views/ElevationView.vue b/demo/views/ElevationView.vue
@@ -0,0 +1,29 @@
+<template>
+    <m-layout-grid-inner>
+        <m-layout-grid-cell :span="12">
+            <m-typo-display :level="1">Elevation</m-typo-display>
+            <m-typo-body :level="2">
+                <a href="https://github.com/matsp/material-components-vue/blob/master/components/Elevation">
+                    https://github.com/matsp/material-components-vue/blob/master/components/Elevation
+                </a>
+            </m-typo-body>
+        </m-layout-grid-cell>
+        <m-layout-grid-cell v-for="n in 24" :key="n">
+            <m-elevation :level="n" class="surface">
+                <m-typo-body>Level {{n}}</m-typo-body>
+            </m-elevation>
+        </m-layout-grid-cell>
+    </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>