diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index 8bc3c70..5d6248e 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -28,6 +28,12 @@
Boolean
Show a button to toggle the password visibility. Default false
+
+
+ md-clearable
+ Boolean
+ Show a button to clear the input. Default false
+
@@ -176,6 +182,11 @@
+
+
+
+
+
@@ -211,6 +222,11 @@
<label>Disabled</label>
<md-input disabled></md-input>
</md-input-container>
+
+ <md-input-container md-clearable>
+ <label>Clearable</label>
+ <md-input v-model="initialValue"></md-input>
+ </md-input-container>
</form>
diff --git a/src/components/mdInputContainer/mdInputContainer.scss b/src/components/mdInputContainer/mdInputContainer.scss
index 50eceef..ff606db 100644
--- a/src/components/mdInputContainer/mdInputContainer.scss
+++ b/src/components/mdInputContainer/mdInputContainer.scss
@@ -215,6 +215,24 @@ $input-size: 32px;
}
}
+ &.md-clearable {
+ &.md-input-focused .md-clear-input {
+ color: rgba(#000, .54);
+ }
+
+ .md-clear-input {
+ margin: 0;
+ position: absolute;
+ right: 0;
+ bottom: -2px;
+ color: rgba(#000, .38);
+
+ .md-ink-ripple {
+ color: rgba(#000, .87);
+ }
+ }
+ }
+
&.md-input-invalid {
.md-error {
opacity: 1;
diff --git a/src/components/mdInputContainer/mdInputContainer.vue b/src/components/mdInputContainer/mdInputContainer.vue
index 7b79561..33410b5 100644
--- a/src/components/mdInputContainer/mdInputContainer.vue
+++ b/src/components/mdInputContainer/mdInputContainer.vue
@@ -7,6 +7,10 @@
{{ showPassword ? 'visibility_off' : 'visibility' }}
+
+
+ clear
+
@@ -20,7 +24,8 @@
name: 'md-input-container',
props: {
mdInline: Boolean,
- mdHasPassword: Boolean
+ mdHasPassword: Boolean,
+ mdClearable: Boolean
},
mixins: [theme],
data() {
@@ -51,6 +56,7 @@
return {
'md-input-inline': this.mdInline,
'md-has-password': this.mdHasPassword,
+ 'md-clearable': this.mdClearable,
'md-has-select': this.hasSelect,
'md-has-file': this.hasFile,
'md-has-value': this.hasValue,
@@ -78,6 +84,13 @@
this.input.focus();
}
},
+ clearInput() {
+ if (this.isInput()) {
+ this.input.value = '';
+ this.setValue(this.input.value);
+ this.$emit('input', this.input.value);
+ }
+ },
setValue(value) {
this.value = value;
}