improve bottom bar docs

docs/src/components/code-block.vue

@@ -20,11 +20,17 @@
     overflow: hidden;
     position: relative;
     border-radius: 2px;
+    background-color: #fbfbfb;
     color: #455A64;
     font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
     font-size: 14px;
     line-height: 1.4em;
 
+    + .code-block {
+      margin-top: 48px;
+      border-top: 1px solid rgba(0, 0, 0, .12);
+    }
+
     &:hover {
       &:after {
         opacity: 0;
@@ -62,10 +68,6 @@
       content: 'SCSS';
     }
 
-    + .code-block {
-      margin-top: 16px;
-    }
-
     pre {
       margin: 0;
       white-space: pre;

docs/src/pages/components/BottomBar.vue

@@ -311,6 +311,23 @@
                 </md-bottom-bar>
               </div>
             </code-block>
+
+            <code-block lang="javascript">
+              export default {
+                data() {
+                  return {
+                    playground: {
+                      theme: &#039;brown&#039;
+                    }
+                  };
+                },
+                methods: {
+                  setTheme(theme) {
+                    this.playground.theme = theme;
+                  }
+                }
+              };
+            </code-block>
           </div>
         </example-box>
       </div>

docs/src/pages/components/EmptyComponent.vue

@@ -0,0 +1,54 @@
+<template>
+  <page-content page-title="Components - Name">
+    <docs-component>
+      <div slot="description">
+
+        <ul class="md-body-2">
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+          <li><code>md-transparent</code></li>
+        </ul>
+      </div>
+
+      <div slot="api">
+        <api-table name="md-bottom-bar">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>empty</md-table-cell>
+                <md-table-cell><code>Type</code></md-table-cell>
+                <md-table-cell>Description</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="Default">
+          <div slot="demo">
+
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<style lang="scss" scoped>
+
+</style>