feat(demo): Add list component demo

matsp · Feb 19, 2018 · 049bfbc · 049bfbc
1 parent 0b2f910
commit 049bfbc
Show file tree

Hide file tree

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

diff --git a/demo/store/modules/app.js b/demo/store/modules/app.js
@@ -48,6 +48,11 @@ const state = {
       route: '/linearProgress',
       icon: 'code'
     },
+    list: {
+      text: 'List',
+      route: '/list',
+      icon: 'code'
+    },
     radio: {
       text: 'Radio',
       route: '/radio',

diff --git a/demo/views/ListView.vue b/demo/views/ListView.vue
@@ -0,0 +1,21 @@
+<template>
+  <m-layout-grid-inner>
+    <m-layout-grid-cell :span="12">
+      <m-typo-display :level="1">List</m-typo-display>
+      <m-typo-body :level="2">
+        <a href="https://github.com/matsp/material-components-vue/blob/master/components/List">
+          https://github.com/matsp/material-components-vue/blob/master/components/List
+        </a>
+      </m-typo-body>
+    </m-layout-grid-cell>
+    <m-layout-grid-cell :span="4">
+      <m-typo-headline>List</m-typo-headline>
+      <m-list>
+        <m-list-item interactive> Item #1 (interactive) </m-list-item>
+        <m-list-item selected> Item #2 (selected) </m-list-item>
+        <m-list-item> Item #3 </m-list-item>
+        <m-list-item activated> Item #4 (activated) </m-list-item>
+      </m-list>
+    </m-layout-grid-cell>
+  </m-layout-grid-inner>
+</template>