Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/e-oj/vue-magic-grid
🧙♂️🔌 Responsive Magic Grid for Vue
https://github.com/e-oj/vue-magic-grid
grid masonry vue
Last synced: about 2 months ago
JSON representation
🧙♂️🔌 Responsive Magic Grid for Vue
- Host: GitHub
- URL: https://github.com/e-oj/vue-magic-grid
- Owner: e-oj
- License: unlicense
- Created: 2018-11-12T16:39:51.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:21:57.000Z (over 1 year ago)
- Last Synced: 2024-04-14T00:52:21.519Z (5 months ago)
- Topics: grid, masonry, vue
- Language: JavaScript
- Homepage: https://npmjs.com/package/vue-magic-grid
- Size: 2.14 MB
- Stars: 177
- Watchers: 3
- Forks: 16
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue-Magic-Grid
[![GitHub forks](https://img.shields.io/github/forks/imlinus/Vue-Magic-Grid.svg)](https://github.com/imlinus/Vue-Magic-Grid/network)
[![GitHub stars](https://img.shields.io/github/stars/imlinus/Vue-Magic-Grid.svg)](https://github.com/imlinus/Vue-Magic-Grid/stargazers)
[![GitHub issues](https://img.shields.io/github/issues/imlinus/Vue-Magic-Grid.svg)](https://github.com/imlinus/Vue-Magic-Grid/issues)
[![GitHub license](https://img.shields.io/github/license/imlinus/Vue-Magic-Grid.svg)](https://github.com/imlinus/Vue-Magic-Grid/blob/master/LICENSE)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)This is a Vue.js port of @[e-oj's](https://github.com/e-oj) [Magic Grid](https://github.com/e-oj/Magic-Grid).
Please check the `/test` folder for a example.If you use images, make sure they have a set height, otherwise the grid will calculate weirdly.
### Setup
Install & Register the component
```js
$ npm i -S vue-magic-grid
``````js
import MagicGrid from 'vue-magic-grid'Vue.use(MagicGrid)
```### Setup with Nuxt
Create a magicgrid.js in your plugin folder
```js
import Vue from 'vue'
import MagicGrid from 'vue-magic-grid'Vue.use(MagicGrid)
```Add the plugin in your nuxt.config.js file
```js
plugins: [
{src: '~/plugins/magicgrid.js'}
]
```### Use
```html
```
### Props
| Prop | Default | Comment |
|:------------|:----------|:---------------------------|
| wrapper | `wrapper` | _Wrapper class_ |
| gap | `32` | _Gap between elements_ |
| maxCols | `5` | _Max number of colums_ |
| maxColWidth | `280` | _Max width of columns_ |
| animate | `false` | _Animate item positioning_ |[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)
Cheers,
ImLinus