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 |