vue-giveworks-form
Version:
This plugin provides Vue.js component for the open [http://giveworks.net](Giveworks Platform).
140 lines (111 loc) • 6.51 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Component Example</title>
</head>
<body>
<div id="app" class="giveworks-form">
<div class="container">
<h3>Custom Input</h3>
<input-field custom v-model="form.custom_text" label="Text Field" placeholder="Enter some text..."></input-field>
<input-field custom v-model="form.custom_email" label="Email Field" type="email" placeholder="you@example.com"></input-field>
<input-field custom label="Help Text" help-text="This is some help text." placeholder="Help Text"></input-field>
<input-field custom label="Text Field" placeholder="Enter some text..." invalid></input-field>
<input-field custom label="Text Field" placeholder="Enter some text..." error="This is an error message."></input-field>
<input-field custom label="Text Field" placeholder="Enter some text..." valid></input-field>
<input-field custom label="Text Field" placeholder="Enter some text..." feedback="This a success message."></input-field>
<h4>Sizes</h4>
<input-field custom v-model="form.custom_sm" label="Small" size="sm" placeholder="Small"></input-field>
<input-field custom v-model="form.custom_md" label="Medium" placeholder="Medium"></input-field>
<input-field custom v-model="form.custom_lg" label="Large" size="lg" placeholder="Large"></input-field>
<h3>Validation</h3>
<hr>
<h3>Custom Select</h3>
<select-field custom v-model="form.custom_select" label="Select Field">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select-field>
<select-field custom label="Invalid"invalid>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select-field>
<select-field custom label="Invalid" error="This is a sample error." invalid>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select-field>
<select-field custom label="Valid" valid>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select-field>
<select-field custom label="Valid" feedback="This a success message.">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select-field>
<h4>Sizes</h4>
<select-field custom v-model="form.custom_select_sm" label="Small" size="sm">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select-field>
<select-field custom v-model="form.custom_select_md" label="Medium">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select-field>
<select-field custom v-model="form.custom_select_lg" label="Large" size="lg">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select-field>
<hr>
<h3>Custom Checkbox</h3>
<checkbox-field v-model="form.checkbox" label="Option B" name="checkbox[]" value="b" custom></checkbox-field>
<checkbox-field v-model="form.checkbox" label="Option C" name="checkbox[]" value="c" custom></checkbox-field>
<checkbox-field v-model="form.checkbox" label="Option A" name="checkbox[]" value="a" custom valid></checkbox-field>
<checkbox-field v-model="form.checkbox" label="Option A" name="checkbox[]" value="a" custom invalid></checkbox-field>
<hr>
<h3>Custom Radio</h3>
<radio-field v-model="form.radio" label="Option A" name="radio" value="a" custom></radio-field>
<radio-field v-model="form.radio" label="Option B" name="radio" value="b" custom></radio-field>
<radio-field v-model="form.radio" label="Option C" name="radio" value="c" custom></radio-field>
<radio-field v-model="form.radio" label="Option D" name="radio" value="d" custom valid></radio-field>
<radio-field v-model="form.radio" label="Option E" name="radio" value="e" custom invalid></radio-field>
</div>
</div>
<!-- Include the css file -->
<link rel="stylesheet" href="../../dist/vue-giveworks-form.css">
<!-- VueGiveworksForm dependencies -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
<!-- VueGiveworksForm Library -->
<script type="text/javascript" src="../../dist/vue-giveworks-form.install.js"></script>
<!-- Instantiate a Vue instance -->
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
form: {
checkbox: ['b'],
radio: 'b',
custom_sm: 'small',
custom_md: 'medium',
custom_lg: 'large',
custom_text: 'test',
custom_email: 'test@test.com',
// custom_select_md: '2'
},
errors: null
}
}
});
</script>
</body>
</html>