add 'type' props to switch button

This commit is contained in:
Guillaume Rouxel 2016-10-24 22:36:00 +02:00
parent a96e79d660
commit 5dd17ccf55
2 changed files with 45 additions and 3 deletions

View file

@ -36,6 +36,16 @@
<md-switch v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
</div>
</demo-example>
<demo-example label="Typed">
<form @click.stop.prevent="submit">
<md-switch v-model="checked8" id="my-test8" name="my-test8">Submit (default)</md-switch>
</form>
<div>
<md-switch type="button" v-model="checked9" id="my-test9" name="my-test9" class="md-primary">Button</md-switch>
</div>
</demo-example>
</div>
<div slot="code">
@ -67,6 +77,28 @@
&lt;/div&gt;
</code-block>
</demo-example>
<demo-example label="Typed">
<code-block lang="xml">
&lt;form @click.stop.prevent=&quot;submit&quot;&gt;
&lt;md-switch v-model=&quot;checked8&quot; id=&quot;my-test8&quot; name=&quot;my-test8&quot;&gt;Submit (default)&lt;/md-switch&gt;
&lt;/form&gt;
&lt;div&gt;
&lt;md-switch type=&quot;button&quot; v-model=&quot;checked9&quot; id=&quot;my-test9&quot; name=&quot;my-test9&quot; class=&quot;md-primary&quot;&gt;Button&lt;/md-switch&gt;
&lt;/div&gt;
</code-block>
<code-block lang="javascript">
export default {
methods: {
submit(e) {
alert('Default switch submits form');
}
}
};
</code-block>
</demo-example>
</div>
<div slot="api">
@ -86,8 +118,17 @@
checked4: true,
checked5: true,
checked6: true,
checked7: true
checked7: true,
checked8: true,
checked9: true,
checked10: true
};
},
methods: {
submit(e) {
alert('Default switch submits form');
}
}
};
</script>

View file

@ -3,7 +3,7 @@
<div class="md-switch-container" @click="toggleSwitch">
<div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled">
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value">
<button class="md-switch-holder"></button>
<button :type="type" class="md-switch-holder"></button>
</div>
</div>
@ -24,7 +24,8 @@
name: String,
value: Boolean,
id: String,
disabled: Boolean
disabled: Boolean,
type: String
},
data() {
return {