vue-flexboxgrid

    1.5.0 • Public • Published

    vue-flexboxgrid

    Vue components made with Flexboxgrid library.

    npm vue2

    A Vue.js Plugin

    Installation

    npm install --save vue-flexboxgrid

    Usage

    Bundler (Webpack, Rollup)

    import Vue from 'vue'
    import VueFlexboxgrid from 'vue-flexboxgrid'
     
    Vue.use(VueFlexboxgrid)
    <style src="vue-flexboxgrid/dist/vue-flexboxgrid.css"/>

    Browser

    <!-- Include after Vue -->
    <link rel="stylesheet" href="vue-flexboxgrid/dist/vue-flexboxgrid.css"></link>
    <script src="vue-flexboxgrid/dist/vue-flexboxgrid.js"></script>

    Components and Props

    Container

    Component:

    <container>
      Your content
    </container>

    Props:

    hero: { type: Boolean, default: false },
    fluid: { type: Boolean, default: false }

    Row

    Component:

    <row>
      Your content
    </row>

    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:

    <column>
      Your content
    </column>

    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, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
    smOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
    mdOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
    lgOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
    xs: { type: String, default: '12', validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
    sm: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
    md: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
    lg: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } }

    Install

    npm i vue-flexboxgrid

    DownloadsWeekly Downloads

    31

    Version

    1.5.0

    License

    MIT

    Last publish

    Collaborators

    • alexchopin