1.0.3 • Published 6 years ago
vue-g-components v1.0.3
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-componentsnpm
npm install vue-g-components --saveSetup
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