vue-g-components

A Google style Vue components

Input

<g-input v-model="ValidationExample" placeholder="Username" pattern="^[a-zA-Z0-9]{4,10}$" validation-message="No Special characters allow!"></g-input>

Checkbox

<g-checkbox v-model="checkboxExample" value="Milk" required validation-message="Milk is required!">Milk</g-checkbox>

Install

yarn

yarn add vue-g-components

npm

npm install vue-g-components --save

Setup

Register the plugin.

import GComponents from 'vue-g-components';
 
Vue.use(GComponents);

Or register components manually.

import {GInput,GCheckbox} from 'vue-g-components';
 
Vue.component('g-input', GInput);
Vue.component('g-checkbox', GCheckbox);

Params

Input

Parameter	Type	Default
id	string	input-id-(element uid)
class-name	string	null
name	string	null
v-model	string, number	null
value	string or number	null
type	text, password, date, number, datetime-local,month, search, tel, time,url or week,	text
placeholder	string	null
pattern	string	null
validation-message	string	null
required	boolean	false
disabled	boolean	false
min	number	null
max	number	null
step	number	null

Checkbox

Parameter	Type	Default
id	string	checkbox-id-(element uid)
class-name	string	null
name	string	null
v-model	string, boolean or array	undefined
value	string or boolean	null
checked	boolean	false
required	boolean	false
disabled	boolean	false
validation-message	string	null

Events

Both components emit the input event to work with v-model and change.

License

MIT © Toshal Infotech