e-oj / Vue Magic Grid
Licence: unlicense
🧙♂️🔌 Responsive Magic Grid for Vue
Stars: ✭ 162
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Magic Grid
Shuffle
Categorize, sort, and filter a responsive grid of items
Stars: ✭ 2,170 (+1239.51%)
Mutual labels: grid, masonry
egjs-grid
A component that can arrange items according to the type of grids
Stars: ✭ 188 (+16.05%)
Mutual labels: grid, masonry
masonry-css
Create mosaic grid, like masonry, with css only
Stars: ✭ 17 (-89.51%)
Mutual labels: grid, masonry
visual-portfolio
Portfolio layouts visual editor with Gutenberg support
Stars: ✭ 31 (-80.86%)
Mutual labels: grid, masonry
Masonry Layout
An efficient and fast web component that gives you a beautiful masonry layout
Stars: ✭ 43 (-73.46%)
Mutual labels: grid, masonry
Egjs Infinitegrid
A module used to arrange card elements including content infinitely on a grid layout.
Stars: ✭ 751 (+363.58%)
Mutual labels: grid, masonry
Niui
Lightweight, feature-rich, accessible front-end library
Stars: ✭ 152 (-6.17%)
Mutual labels: grid, masonry
Binance grid trader
A grid trading strategy and trading-bot for Binance Exchange. 币安交易所的网格交易
Stars: ✭ 132 (-18.52%)
Mutual labels: grid
Postcss Ant
Size-getting function masquerading as a grid system.
Stars: ✭ 145 (-10.49%)
Mutual labels: grid
Baseguide
Lightweight and robust CSS framework for prototyping and production code.
Stars: ✭ 127 (-21.6%)
Mutual labels: grid
Popo
PoPo is the grid layout tool, the best choice for runtime layout.
Stars: ✭ 130 (-19.75%)
Mutual labels: grid
Selenoid
Selenium Hub successor running browsers within containers. Scalable, immutable, self hosted Selenium-Grid on any platform with single binary.
Stars: ✭ 2,065 (+1174.69%)
Mutual labels: grid
Functional Data Grid
Data grids in functional style with ReactJS
Stars: ✭ 125 (-22.84%)
Mutual labels: grid
Yii2 Export
A library to export server/db data in various formats (e.g. excel, html, pdf, csv etc.)
Stars: ✭ 153 (-5.56%)
Mutual labels: grid
Grid
Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets and more 💥
Stars: ✭ 573 (+253.7%)
Mutual labels: grid
Vue-Magic-Grid
This is a Vue.js port of @e-oj's 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
$ npm i -S vue-magic-grid
import MagicGrid from 'vue-magic-grid'
Vue.use(MagicGrid)
Setup with Nuxt
Create a magicgrid.js in your plugin folder
import Vue from 'vue'
import MagicGrid from 'vue-magic-grid'
Vue.use(MagicGrid)
Add the plugin in your nuxt.config.js file
plugins: [
{src: '~/plugins/magicgrid.js'}
]
Use
<magic-grid>
<card
v-for="(post, i) in posts"
:key="i"
:title="post.title"
:body="post.body" />
</magic-grid>
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 |
Cheers, ImLinus
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].