Skip to content

Latest commit

 

History

History
183 lines (129 loc) · 4.55 KB

README.md

File metadata and controls

183 lines (129 loc) · 4.55 KB
Raw
Vue Framework

Vue Grid Responsive

Responsive grid system based on Bootstrap for Vue.



npm version • License: MIT • Build 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.