vue-grid-responsive

    0.5.0 • Public • Published
    Vue Framework

    Vue Grid Responsive

    Responsive grid system based on Bootstrap for Vue.



    npm versionLicense: MITBuild Status

    Installation

    NPM

    vue 2.0

    npm i vue-grid-responsive
    // OR
    yarn add vue-grid-responsive
    

    vue 3.0

    npm i vue-grid-responsive@next
    // OR
    yarn add vue-grid-responsive@next
    

    CDN

    vue 2.0

    <script src="https://unpkg.com/vue-grid-responsive"></script>

    vue 3.0

    <script src="https://unpkg.com/vue-grid-responsive@next"></script>

    Manual

    You can also download and import it manually

    <script src="/vue-grid-responsive/dist/vue-grid-reponsive.min.js"></script>

    Module import

    vue 2.0

    import Vue from 'vue';
    import { Row, Column, Hidden } from 'vue-grid-responsive';
    
    Vue.component('row', Row);
    Vue.component('column', Column);
    Vue.component('hidden', Hidden);

    vue 3.0

    import { createApp } from 'vue';
    import { Row, Column, Hidden } from 'vue-grid-responsive';
    
    const app = createApp(App);
    
    app.component('row', Row);
    app.component('column', Column);
    app.component('hidden', Hidden);

    Examples

    An example of how to use the library:

    <template>
      <row container :gutter="12">
        <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
        <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
        <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
        <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
      </row>
    </template>

    An example how to use offset in addition with a columns:

    <template>
      <row container :gutter="12">
        <column :md="8" :mdOffset="2" :lg="6" :lgOffset="3"> </column>
      </row>
    </template>

    Using the hidden component:

    <template>
      <div>
        <hidden :xs="true"> hidden xs </hidden>
        <hidden :md="true"> hidden md </hidden>
        <hidden :xl="true"> hidden xl </hidden>
      </div>
    </template>

    Demo Link

    Local demo:

    git clone https://github.com/andrelmlins/vue-grid-responsive.git
    cd vue-grid-responsive
    npm && npm run dev
    

    Properties

    Component props:

    Row Component props

    Prop Default Type Description
    gutter - number Grid spacing in the container
    columns 12 number Setting columns count in the container

    Column Component props

    Basic Size

    Prop Default Type Description
    xs - number Size in extra small screen
    sm - number Size in small screen
    md - number Size in medium screen
    lg - number Size in large screen
    xl - number Size in extra large screen
    order - number Order the columns

    Offset

    Prop Default Type Description
    xsOffset - number Offset in extra small screen
    smOffset - number Offset in small screen
    mdOffset - number Offset in medium screen
    lgOffset - number Offset in large screen
    xlOffset - number Offset in extra large screen

    Hidden Component props

    Prop Default Type Description
    xs - boolean Hidden in extra small size
    sm - boolean Hidden in small size
    md - boolean Hidden in medium size
    lg - boolean Hidden in large size
    xl - boolean Hidden in extra large size

    NPM Statistics

    Download stats for this NPM package

    NPM

    License

    Vue Grid Responsive is open source software licensed as MIT.

    Install

    npm i vue-grid-responsive

    DownloadsWeekly Downloads

    242

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    127 kB

    Total Files

    9

    Last publish

    Collaborators

    • andrelmlins