README
Cols
The wovue-cols
module contains the grid system components.
Install using npm:
$ npm install --save wovue-cols
Note this will only works with webpack
build system.
Note The wv-cols
component use negative margins, you will need a root element overflowing the wv-cols
component, or it will cause horizontal scroll.
Usage
require('wovue-cols/src/_components.cols.scss')
import { WvCols, WvCol } from 'wovue-cols'
new Vue({
components: {
WvCols,
WvCol
}
})
<div class="u-overflow-hidden">
<wv-cols :gutter="4" vertical-align="middle">
<wv-col size="6" md="2" lg="8">
<!-- here your content -->
</wv-col>
<wv-col size="6" md="10" lg="4">
<!-- here your content -->
</wv-col>
<wv-col size="12">
<wv-cols :gutter="2">
<wv-col size="3">
<!-- here your content -->
</wv-col>
<wv-col size="7">
<!-- here your content -->
</wv-col>
</wv-cols>
</wv-col>
</wv-cols>
</div>
Props
cols
Name | Type | Default | Description |
---|---|---|---|
verticalAlign | String, Boolean | false |
Colums vertical align. The support values are 'middle' and 'stretch' |
gutter | Number, String, Boolean | false |
Alter spacing between colums. The support values are 1 , 2 , 3 , 4 , 5 , 6 |
col
Name | Type | Default | Description |
---|---|---|---|
size | Number, String, Boolean | false |
Column size. The support values are 'auto' , 'fit' , 1 , 2 , 3 , ...12 |
responsive | Object, Boolean | false |
Custom breakpoints and values. |
xs | Number, String, Boolean | false |
Column size for xs devices. The support values are 'auto' , 'fit' , 1 , 2 , 3 , ...12 |
sm | Number, String, Boolean | false |
As above. |
md | Number, String, Boolean | false |
As above. |
lg | Number, String, Boolean | false |
As above. |
xl | Number, String, Boolean | false |
As above. |
Breakpoints
Key | Value |
---|---|
xs | 320px |
sm | 480px |
md | 768px |
lg | 992px |
xl | 1200px |