feat(MdButton): add md-ripple option to enable/disable the effect

Author: marcosmoura

docs/app/pages/Components/Button/Button.vue

@@ -72,17 +72,23 @@
                 description: 'Create a anchor on the button. In this case the generated tag will be <a>.',
                 defaults: 'null'
               },
+              {
+                name: 'type',
+                type: 'String',
+                description: 'Apply a type to button - Don\'t affect links.',
+                defaults: 'button'
+              },
               {
                 name: 'disabled',
                 type: 'Boolean',
                 description: 'Disable the button and prevent his actions.',
                 defaults: 'false'
               },
               {
-                name: 'type',
-                type: 'String',
-                description: 'Apply a type to button - Don\'t affect links.',
-                defaults: 'button'
+                name: 'md-ripple',
+                type: 'Boolean',
+                description: 'Enable/Disable the ripple effect.',
+                defaults: 'true'
               }
             ]
           },

docs/app/pages/Components/Button/examples/RegularButtons.vue

@@ -3,6 +3,7 @@
     <div>
       <small>Flat</small>
       <md-button>Default</md-button>
+      <md-button :md-ripple="false">Ripple Off</md-button>
       <md-button class="md-primary">Primary</md-button>
       <md-button class="md-accent">Accent</md-button>
       <md-button disabled>Disabled</md-button>
@@ -11,6 +12,7 @@
     <div>
       <small>Raised</small>
       <md-button class="md-raised">Default</md-button>
+      <md-button class="md-raised" :md-ripple="false">Ripple Off</md-button>
       <md-button class="md-raised md-primary">Primary</md-button>
       <md-button class="md-raised md-accent">Accent</md-button>
       <md-button class="md-raised" disabled>Disabled</md-button>

src/components/mdButton/mdButton.vue

@@ -1,3 +1,70 @@
+<script>
+  import MdComponent from 'core/MdComponent'
+  import ripple from 'core/mixins/ripple'
+  import MdButtonContent from './MdButtonContent'
+
+  export default new MdComponent({
+    name: 'MdButton',
+    components: {
+      MdButtonContent
+    },
+    mixins: [ripple],
+    props: {
+      href: String,
+      type: {
+        type: String,
+        default: 'button'
+      },
+      disabled: Boolean,
+      mdRipple: {
+        type: Boolean,
+        default: true
+      },
+      to: [String, Object]
+    },
+    render (createElement) {
+      const buttonContent = createElement('md-button-content', {
+        attrs: {
+          mdRipple: this.mdRipple,
+          disabled: this.disabled
+        }
+      }, this.$slots.default)
+      let buttonAttrs = {
+        staticClass: 'md-button',
+        class: [
+          this.$mdActiveTheme,
+          {
+            'md-ripple-off': !this.mdRipple
+          }
+        ],
+        attrs: {
+          href: this.href,
+          disabled: this.disabled,
+          type: !this.href && (this.type || 'button')
+        },
+        on: {
+          click: ($event) => {
+            this.$emit('click', $event)
+          }
+        }
+      }
+      let tag = 'button'
+
+      if (this.href) {
+        tag = 'a'
+      } else if (this.$router && this.to) {
+        tag = 'router-link'
+        buttonAttrs.attrs = {
+          ...this.$options.propsData,
+          to: this.to
+        }
+      }
+
+      return createElement(tag, buttonAttrs, [buttonContent])
+    }
+  })
+</script>
+
 <style lang="scss">
   @import "~components/MdAnimation/variables";
   @import "~components/MdElevation/mixins";
@@ -73,6 +140,10 @@
           opacity: .2;
         }
       }
+
+      &.md-ripple-off:active:before {
+        opacity: .26;
+      }
     }
 
     &::-moz-focus-inner {
@@ -104,6 +175,10 @@
       &:active {
         @include md-elevation(8);
       }
+
+      &.md-ripple-off:active:before {
+        opacity: .2;
+      }
     }
 
     + .md-button {
@@ -154,67 +229,4 @@
       transition-duration: 1.2s;
     }
   }
-
-  .md-button-content {
-    position: relative;
-    z-index: 2;
-  }
 </style>
-
-<script>
-  import MdComponent from 'core/MdComponent'
-  import ripple from 'core/mixins/ripple'
-  import MdButtonContent from './MdButtonContent'
-
-  export default new MdComponent({
-    name: 'MdButton',
-    components: {
-      MdButtonContent
-    },
-    mixins: [ripple],
-    props: {
-      href: String,
-      type: {
-        type: String,
-        default: 'button'
-      },
-      disabled: Boolean,
-      to: [String, Object]
-    },
-    render (createElement) {
-      const buttonContent = createElement('md-button-content', {
-        attrs: {
-          mdRipple: this.mdRipple,
-          disabled: this.disabled
-        }
-      }, this.$slots.default)
-      let buttonAttrs = {
-        staticClass: 'md-button',
-        class: [this.$mdActiveTheme],
-        attrs: {
-          href: this.href,
-          disabled: this.disabled,
-          type: this.type || 'button'
-        },
-        on: {
-          click: ($event) => {
-            this.$emit('click', $event)
-          }
-        }
-      }
-      let tag = 'button'
-
-      if (this.href) {
-        tag = 'a'
-      } else if (this.to) {
-        tag = 'router-link'
-        buttonAttrs.attrs = {
-          ...this.$options.propsData,
-          to: this.to
-        }
-      }
-
-      return createElement(tag, buttonAttrs, [buttonContent])
-    }
-  })
-</script>