Package Exports
- @yeger/vue2-masonry-wall
- @yeger/vue2-masonry-wall/dist/masonry-wall.es.js
- @yeger/vue2-masonry-wall/dist/masonry-wall.umd.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@yeger/vue2-masonry-wall) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@yeger/vue2-masonry-wall
Responsive masonry layout with SSR support and zero dependencies for Vue 2.
Features
- 📱 Responsive: Responsive with configurable column width and gaps. Based on
ResizeObserver
. - 🔁 Reactive: Reacts to property changes.
- 🪶 Lightweight: Zero dependencies. Less than 1.7 kB.
- ⬅️ RTL: Supports LTR and RTL layouts.
Links
Installation
# yarn
$ yarn add @yeger/vue2-masonry-wall
# npm
$ npm install @yeger/vue2-masonry-wall
Usage
import Vue from 'vue'
import MasonryWall from '@yeger/vue2-masonry-wall'
Vue.use(MasonryWall)
Props:
items
: Array of items. Required.column-width
: Minimal width of columns inpx
.gap
: Spacing between items inpx
. Defaults to0
.rtl
: Toggles between LTR (false
) and RTL (true
) layouts. Defaults tofalse
.ssr-columns
: Number of server-side-rendered columns. Optional.scroll-container
: ScrollingHTMLElement
parent element that will be used for restoring scroll position. If omitted,window
is used.
<script>
export default {
data() {
return {
items: [
{ title: 'First', description: 'The first item.' },
{ title: 'Second', description: 'The second item.' },
],
}
},
}
</script>
<template>
<masonry-wall :items="items" :ssr-columns="1" :column-width="300" :gap="16">
<template #default="{ item, index }">
<div style="height: 100px">
<h1>{{ item.title }} ({{ index }})</h1>
<span>{{ item.description }}</span>
</div>
</template>
</masonry-wall>
</template>
Adding items
To add new items, assign a new value to the items
property, e.g., items.value = [...items.value, newItem]
.
DO NOT push items to the array (e.g., items.value.push(newItem)
), as such mutations will not be detected by the reactivity.
Limitations
This library intentionally doesn't handle elements with dynamically changing height, as this would cause constant changes of the column distribution. As a consequence, the initial height of items is used. For images, specifying aspect ratios can prevent unbalanced distributions.
All columns have the same width, specified by the column-width
property.
In addition, the elements of items should not set a specific width and instead be full-width, e.g., use width: 100%
.
Development
# install dependencies
$ pnpm install
# develop in watch mode
$ pnpm dev
# build for production
$ pnpm build
# lint project files
$ pnpm lint
# run tests
$ pnpm test
Disclaimer
This component originated as a modified version of vue-masonry-wall by Fuxing Loh.
License
MIT - Copyright © Fuxing Loh, Jan Müller