README
Vue Form Generator theme Bootstrap
Install
npm install --save-dev @cknow/vfg-theme-bootstrap
Usage
Note: Do not forget to add the style sheets of theme to the header of the page.
import Vfg from '@cknow/vfg';
import VfgThemeBootstrap from '@cknow/vfg-theme-bootstrap';
Vue.use(Vfg, {
theme: 'boostrap'
});
Vue.use(VfgThemeBootstrap);
Component:
<template>
<vfg :model="model" :schema="schema"></vfg>
</template>
<script>
export default {
data() {
return {
model: {
name: 'Foo Bar',
email: 'foo@bar.com',
},
schema: [
{
// input text is default
label: 'Name',
model: 'name'
},
{
inputType: 'email',
label: 'E-mail',
model: 'email'
}
]
}
}
}
</script>
Result:
<div>
<div class="form-group">
<label for="name">Name:</label>
<input class="form-control" type="text" id="name" value="Foo Bar">
</div>
<div class="form-group">
<label for="email">E-mail:</label>
<input class="form-control" type="email" id="email" value="foo@bar.com">
</div>
</div>