Create components to show demos

src/docs/components/demo-example.vue

@@ -0,0 +1,73 @@
+<template>
+  <md-whiteframe class="demo-example" :class="classes" :style="{ height: height + 'px' }">
+    <md-toolbar v-md-theme="titleTheme">
+      <h2 class="md-title">{{ label }}</h2>
+    </md-toolbar>
+
+    <section v-md-theme="bodyTheme">
+      <slot></slot>
+    </section>
+  </md-whiteframe>
+</template>
+
+<style lang="scss" scoped>
+  .demo-example {
+    max-width: 100%;
+    min-width: 320px;
+    position: relative;
+    overflow: hidden;
+    background-color: #fafafa;
+
+    &.size-1 {
+      width: 320px;
+    }
+
+    &.size-2 {
+      width: 412px;
+    }
+
+    &.size-3 {
+      width: 480px;
+    }
+
+    &.size-4 {
+      width: 600px;
+    }
+
+    &.size-5 {
+      width: 768px;
+    }
+
+    + .demo-example {
+      margin-top: 16px;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    props: {
+      label: [String, Number],
+      titleTheme: {
+        type: String,
+        default: 'grey'
+      },
+      bodyTheme: {
+        type: String,
+        default: 'default'
+      },
+      size: [String, Number],
+      height: [String, Number]
+    },
+    computed: {
+      classes() {
+        if (!this.size) {
+          return false;
+        }
+
+        return 'size-' + this.size;
+      }
+    }
+  };
+</script>
+

src/docs/components/demo-page.vue

@@ -31,6 +31,14 @@
         padding-left: 8px;
       }
 
+      .md-tab-header {
+        color: rgba(#fff, .7);
+
+        &.md-active {
+          color: #fff;
+        }
+      }
+
       .md-tab-indicator {
         background-color: #fff;
       }