mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-22 07:34:48 +00:00
Merge branch 'develop' of https://github.com/marcosmoura/vue-material into develop
* 'develop' of https://github.com/marcosmoura/vue-material: default 'type' value is now 'button' updated docs add 'type' props to switch button
This commit is contained in:
commit
d755014fff
2 changed files with 48 additions and 3 deletions
|
|
@ -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">
|
||||
<md-switch v-model="checked8" id="my-test8" name="my-test8">Button (default)</md-switch>
|
||||
|
||||
<div>
|
||||
<form @click.stop.prevent="submit">
|
||||
<md-switch type="submit" v-model="checked9" id="my-test9" name="my-test9" class="md-primary">Submit</md-switch>
|
||||
</form>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
|
|
@ -67,6 +77,28 @@
|
|||
</div>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Typed">
|
||||
<code-block lang="xml">
|
||||
<div>
|
||||
<md-switch v-model="checked8" id="my-test8" name="my-test8" class="md-primary">Button (default)</md-switch>
|
||||
</div>
|
||||
|
||||
<form @click.stop.prevent="submit">
|
||||
<md-switch type="submit" v-model="checked9" id="my-test9" name="my-test9">Submit</md-switch>
|
||||
</form>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
export default {
|
||||
methods: {
|
||||
submit(e) {
|
||||
alert('This switch submits the 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() {
|
||||
alert('This switch submits the form');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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,11 @@
|
|||
name: String,
|
||||
value: Boolean,
|
||||
id: String,
|
||||
disabled: Boolean
|
||||
disabled: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in a new issue