Menu

Blogs

We Care Through What We Share
  • vue-g-components

    Now a day’s web applications playing key role for most of the businesses and application developers are using JavaScript framework as their application frontend. VueJs is one of the popular framework and because of that I decided to create components for better user experience and save developers time instead of creating their own component and styling them.

    In terms of user experience, we all know that most of the internet users are using google products and their rich user interface allow user to understand and use their product effectively. That is why I decided to use their styling for Vue Components to make your application more efficient and easy to use for end user.

    A Vue component provides a uniform way to structure and we have named it vue-g-components which make:

    1. easier for developers, designers, and team members to understand and find things/controls.
    2. easier for IDEs to interpret the code and provide assistance.
    3. easier to (re)use build tools you already use.
    4. easier to cache and serve bundles of code separately.

    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" 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 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

    A Google style Vue Component. github and npm package

Copyright © Toshal Infotech 2018, All Rights Reserved.