wovue-cols

0.0.2 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i wovue-cols

Weekly Downloads

2

Version

0.0.2

License

ISC

Last publish

Collaborators

  • wochap