vue-flexboxgrid
Vue components made with Flexboxgrid library.
A Vue.js Plugin
Installation
npm install --save vue-flexboxgrid
Usage
Bundler (Webpack, Rollup)
Vue
Browser
<!-- Include after Vue -->
Components and Props
Container
Component:
Your content
Props:
hero: type: Boolean default: false fluid: type: Boolean default: false
Row
Component:
Your content
Props:
reverse: type: Boolean default: false startXs: type: Boolean default: false centerXs: type: Boolean default: false endXs: type: Boolean default: false topXs: type: Boolean default: false middleXs: type: Boolean default: false bottomXs: type: Boolean default: false aroundXs: type: Boolean default: false betweenXs: type: Boolean default: false startSm: type: Boolean default: false centerSm: type: Boolean default: false endSm: type: Boolean default: false topSm: type: Boolean default: false middleSm: type: Boolean default: false bottomSm: type: Boolean default: false aroundSm: type: Boolean default: false betweenSm: type: Boolean default: false startMd: type: Boolean default: false centerMd: type: Boolean default: false endMd: type: Boolean default: false topMd: type: Boolean default: false middleMd: type: Boolean default: false bottomMd: type: Boolean default: false aroundMd: type: Boolean default: false betweenMd: type: Boolean default: false startLg: type: Boolean default: false centerLg: type: Boolean default: false endLg: type: Boolean default: false topLg: type: Boolean default: false middleLg: type: Boolean default: false bottomLg: type: Boolean default: false aroundLg: type: Boolean default: false betweenLg: type: Boolean default: false
Column
Component:
Your content
Props:
firstXs: type: Boolean default: false lastXs: type: Boolean default: false firstSm: type: Boolean default: false lastSm: type: Boolean default: false firstMd: type: Boolean default: false lastMd: type: Boolean default: false firstLg: type: Boolean default: false lastLg: type: Boolean default: false xsOffset: type: String { var i = ; return ! && v > 0 && v < 13 } smOffset: type: String { var i = ; return ! && v > 0 && v < 13 } mdOffset: type: String { var i = ; return ! && v > 0 && v < 13 } lgOffset: type: String { var i = ; return ! && v > 0 && v < 13 } xs: type: String default: '12' { var i = ; return ! && v > 0 && v < 13 } sm: type: String { var i = ; return ! && v > 0 && v < 13 } md: type: String { var i = ; return ! && v > 0 && v < 13 } lg: type: String { var i = ; return ! && v > 0 && v < 13 }