/vue-flow-layout

Waterfull layout

Primary LanguageTypeScriptMIT LicenseMIT

vue-flow-layout

🌊 The Vue waterfull layout component.

npm version npm downloads License

Features

  • 🌊 Waterfull layout
  • 📦 Lightweight
  • 🎨 Elegant transition
  • 📱 Responsive

Install

pnpm add vue-flow-layout

Usage

import { createApp } from 'vue'
import VueFlowLayout from 'vue-flow-layout'
import App from './App.vue'

createApp(App).use(VueFlowLayout).mount('#app')

Use in your component:

<template>
  <FlowLayout>
    <div v-for="i in 100" :key="i" class="item">
      {{ i }}
    </div>
  </FlowLayout>
</template>

Props

Name Type Default Description
cols number 2 The number of columns
gap number | [number, number] 4 The gap between items for X
duration number 350ms The transition duration

Credits

license

MIT