Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexchopin/vue-flexboxgrid
Vue components made with Flexboxgrid
https://github.com/alexchopin/vue-flexboxgrid
css css-grid flexbox flexbox-grid vue-components vuejs vuejs2
Last synced: 4 months ago
JSON representation
Vue components made with Flexboxgrid
- Host: GitHub
- URL: https://github.com/alexchopin/vue-flexboxgrid
- Owner: alexchopin
- License: mit
- Created: 2017-02-09T18:44:08.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-10T09:09:45.000Z (almost 8 years ago)
- Last Synced: 2024-10-01T10:21:49.284Z (5 months ago)
- Topics: css, css-grid, flexbox, flexbox-grid, vue-components, vuejs, vuejs2
- Language: Vue
- Size: 166 KB
- Stars: 37
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-flexboxgrid
Vue components made with [Flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid) library.
[](https://www.npmjs.com/package/vue-flexboxgrid) [](https://vuejs.org/)
> A Vue.js Plugin
## Installation
```bash
npm install --save vue-flexboxgrid
```
## Usage
### Bundler (Webpack, Rollup)
```js
import Vue from 'vue'
import VueFlexboxgrid from 'vue-flexboxgrid'
Vue.use(VueFlexboxgrid)
```
```html
```
### Browser
```html
```
## Components and Props
### Container
Component:
```html
Your content
```
Props:
```js
hero: { type: Boolean, default: false },
fluid: { type: Boolean, default: false }
```
### Row
Component:
```html
Your content
```
Props:
```js
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:
```html
Your content
```
Props:
```js
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 } }
```