Added link functionality to button component.

matsp · Oct 21, 2017 · d5d8e2d · d5d8e2d
1 parent 8e7f6e3
commit d5d8e2d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/components/Button/Button.vue b/components/Button/Button.vue
@@ -1,5 +1,9 @@
 <template>
-    <button class="mdc-button" :class="classes" v-bind="$attrs" v-on="$listeners">
+    <a v-if="href" role="button" class="mdc-button" :href="href">
+        <a v-if="icon" class="material-icons mdc-button__icon">{{icon}}</a>
+        <slot />
+    </a>
+    <button v-else class="mdc-button" :class="classes" v-bind="$attrs" v-on="$listeners">
         <a v-if="icon" class="material-icons mdc-button__icon">{{icon}}</a>
         <slot />
     </button>
@@ -36,6 +40,10 @@ export default {
         interactive: {
             type: Boolean,
             required: false
+        },
+        href: {
+            type: String,
+            required: false
         }
     },
     data() {

diff --git a/components/Button/README.md b/components/Button/README.md
@@ -6,6 +6,7 @@
 <m-button interactive raised @click="onClick">Button</m-button>
 <m-button unelevated icon="cloud">Button</m-button>
 <m-button disabled>Button</m-button>
+<m-button interactive href="https://github.com/matsp/material-components-vue">Github</m-button>
 ```
 ### props & events
 | Prop | Type | Default | Required | Description |
@@ -17,6 +18,7 @@
 | dense | Boolean | - | false | dense button
 | compact | Boolean | - | false | compact button
 | interactive | Boolean | - | false | button with ripple effect
+| href | String | - | false | link button
 
 Non prop attributes and events are mapped to the inner button element.
 

diff --git a/demo/views/ButtonView.vue b/demo/views/ButtonView.vue
@@ -1,7 +1,15 @@
 <template>
     <m-layout-grid-inner>
-        <m-layout-grid-cell :span="8">
-            <m-typo-title>Text</m-typo-title>
+         <m-layout-grid-cell :span="12">
+            <m-typo-display :level="1">Button</m-typo-display>
+                        <m-typo-body :level="2">
+                <a href="https://github.com/matsp/material-components-vue/blob/master/components/Button">
+                    https://github.com/matsp/material-components-vue/blob/master/components/Button
+                </a>
+            </m-typo-body>
+         </m-layout-grid-cell>
+        <m-layout-grid-cell :span="12">
+            <m-typo-headline>Text</m-typo-headline>
             <m-layout-grid-inner>
                 <m-layout-grid-cell :span="3">
                     <m-button>text</m-button>
@@ -23,8 +31,8 @@
                 </m-layout-grid-cell>
             </m-layout-grid-inner>
         </m-layout-grid-cell>
-        <m-layout-grid-cell :span="8">
-            <m-typo-title>Raised</m-typo-title>
+        <m-layout-grid-cell :span="12">
+            <m-typo-headline>Raised</m-typo-headline>
             <m-layout-grid-inner>
              <m-layout-grid-cell :span="3">
             <m-button raised>text</m-button>
@@ -46,8 +54,8 @@
             </m-layout-grid-cell>
             </m-layout-grid-inner>
         </m-layout-grid-cell>
-        <m-layout-grid-cell :span="8">
-            <m-typo-title>Unelevated</m-typo-title>
+        <m-layout-grid-cell :span="12">
+            <m-typo-headline>Unelevated</m-typo-headline>
             <m-layout-grid-inner>
              <m-layout-grid-cell :span="3">
             <m-button unelevated>text</m-button>
@@ -69,8 +77,8 @@
             </m-layout-grid-cell>
             </m-layout-grid-inner>
         </m-layout-grid-cell>
-        <m-layout-grid-cell :span="8">
-            <m-typo-title>Stroked</m-typo-title>
+        <m-layout-grid-cell :span="12">
+            <m-typo-headline>Stroked</m-typo-headline>
             <m-layout-grid-inner>
              <m-layout-grid-cell :span="3">
             <m-button stroked>text</m-button>