69

Vue-Magic-Grid: A Vue.js port of Magic-Grid for dynamic grid layouts

 5 years ago
source link: https://www.tuicool.com/articles/hit/JNj6JvQ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.

vyQv2eZ.png!web

Setup

Install & Register the component

$ npm i -S vue-magic-grid
import MagicGrid from 'vue-magic-grid'

Vue.use(MagicGrid)

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK