Google style Vue Components
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
src
.babelrc
.gitignore
LICENSE
README.md
package-lock.json
package.json
webpack.config.js

README.md

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