Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cute-angelia/vue-masonry-wall
only for edu
https://github.com/cute-angelia/vue-masonry-wall
Last synced: 6 days ago
JSON representation
only for edu
- Host: GitHub
- URL: https://github.com/cute-angelia/vue-masonry-wall
- Owner: cute-angelia
- License: mit
- Created: 2023-05-11T12:28:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-05-11T13:26:01.000Z (over 1 year ago)
- Last Synced: 2024-04-28T04:21:55.244Z (9 months ago)
- Language: TypeScript
- Size: 109 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.legacy.md
- License: LICENSE
Awesome Lists containing this project
README
@yeger/vue-masonry-wall
Responsive masonry layout with SSR support and zero dependencies for Vue 3.
## Features
- 📱 **Responsive**: Responsive with configurable column width and gaps. Based on `ResizeObserver`.
- 🔁 **Reactive**: Reacts to property changes.
- 🪶 **Lightweight**: Zero dependencies. Less than 1.3 kB.
- ⬅️ **RTL**: Supports LTR and RTL layouts.
## Links
- [Demo](https://vue-masonry-wall.yeger.eu/)
- [Vue 2 version](https://github.com/DerYeger/yeger/tree/main/packages/vue2-masonry-wall)
## Installation
```bash
# yarn
$ yarn add @yeger/vue-masonry-wall
# npm
$ npm install @yeger/vue-masonry-wall
```
## Usage
```typescript
import { createApp } from 'vue'
import MasonryWall from '@yeger/vue-masonry-wall'
const app = createApp()
app.use(MasonryWall)
```
Props:
- `items`: Array of items. Required.
- `column-width`: Minimal width of columns in `px`.
- `gap`: Spacing between items in `px`. Defaults to `0`.
- `rtl`: Toggles between LTR (`false`) and RTL (`true`) layouts. Defaults to `false`.
- `ssr-columns`: Number of server-side-rendered columns. Optional.
- `scroll-container`: Scrolling `HTMLElement` parent element that will be used for restoring scroll position. If omitted, `window` is used.
```vue
const items = [
{
title: 'First',
description: 'The first item.',
},
{
title: 'Second',
description: 'The second item.',
},
]
{{ item.title }}
{{ item.description }}
```
### 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%`.
### Nuxt 3
Create a plugin (e.g., `plugins/vue-masonry-wall.ts`) with the following code:
```ts
import MasonryWall from '@yeger/vue-masonry-wall'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(MasonryWall)
})
```
Also, see .
## Development
To serve or build the demo, the library has to be built first using `pnpm dev` or `pnpm build`.
```bash
# 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](https://github.com/fuxingloh/vue-masonry-wall) by [Fuxing Loh](https://github.com/fuxingloh).
## License
[MIT](https://github.com/DerYeger/yeger/blob/main/packages/vue-masonry-wall/LICENSE) - Copyright © Fuxing Loh, Jan Müller