mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-12 01:03:09 +00:00
86 lines
2.4 KiB
Vue
86 lines
2.4 KiB
Vue
<template>
|
|
<section>
|
|
<validator name="validation">
|
|
<form novalidate @submit.stop.prevent="submit">
|
|
<md-input-container>
|
|
<label>Initial value</label>
|
|
<md-input value="My initial value"></md-input>
|
|
</md-input-container>
|
|
|
|
<md-input-container>
|
|
<label>With label</label>
|
|
<md-input placeholder="My nice placeholder"></md-input>
|
|
</md-input-container>
|
|
|
|
<md-input-container md-inline>
|
|
<label>Inline field</label>
|
|
<md-input></md-input>
|
|
</md-input-container>
|
|
|
|
<md-input-container>
|
|
<label>Required</label>
|
|
<md-input required v-validate:inline="['required']" initial="off"></md-input>
|
|
|
|
<span class="md-error">Validation message</span>
|
|
</md-input-container>
|
|
|
|
<md-input-container>
|
|
<label>Disabled</label>
|
|
<md-input disabled></md-input>
|
|
</md-input-container>
|
|
|
|
<md-input-container md-has-password>
|
|
<label>Passwords</label>
|
|
<md-input type="password"></md-input>
|
|
</md-input-container>
|
|
|
|
<md-input-container>
|
|
<label>Textarea</label>
|
|
<md-textarea></md-textarea>
|
|
</md-input-container>
|
|
|
|
<md-input-container>
|
|
<label>Character counter - Textarea</label>
|
|
<md-textarea maxlength="70" v-validate:counterTextarea="{ maxlength: 70 }" initial="off"></md-textarea>
|
|
|
|
<span class="md-error">Max length reached</span>
|
|
</md-input-container>
|
|
|
|
<md-input-container>
|
|
<label>Character counter - Input</label>
|
|
<md-input maxlength="20" v-validate:counterInput="{ maxlength: 20 }" initial="off"></md-input>
|
|
|
|
<span class="md-error">Max length reached</span>
|
|
</md-input-container>
|
|
|
|
<md-input-container v-md-theme="'blue'">
|
|
<label>Themable - Input</label>
|
|
<md-input></md-input>
|
|
</md-input-container>
|
|
|
|
<md-input-container v-md-theme="'orange'">
|
|
<label>Themable - Textarea</label>
|
|
<md-textarea></md-textarea>
|
|
</md-input-container>
|
|
|
|
<md-button type="submit" class="md-primary md-raised">Validate</md-button>
|
|
</form>
|
|
</validator>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
section {
|
|
margin: 24px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
submit() {
|
|
this.$validate(true);
|
|
}
|
|
}
|
|
};
|
|
</script>
|