Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/MopTym/vue-waterfall

A waterfall layout component for Vue.js
https://github.com/MopTym/vue-waterfall

Last synced: 10 days ago
JSON representation

A waterfall layout component for Vue.js

Lists

README 

        
![preview](vue-waterfall.jpg)



# vue-waterfall



[![Build Status](https://img.shields.io/travis/MopTym/vue-waterfall.svg?style=flat-square)](https://travis-ci.org/MopTym/vue-waterfall)

[![Version](https://img.shields.io/npm/v/vue-waterfall.svg?style=flat-square)](https://www.npmjs.com/package/vue-waterfall)

[![License](https://img.shields.io/npm/l/vue-waterfall.svg?style=flat-square)](LICENSE)



A waterfall layout component for Vue.js .



Branch [0.x (version 0.x.x)](https://github.com/MopTym/vue-waterfall/tree/0.x) is compatible with Vue 1 .



## Demo



- [Vertical line](http://app.moptym.com/vue-waterfall/demo/vertical-line.html)

- [Horizontal line](http://app.moptym.com/vue-waterfall/demo/horizontal-line.html)

- [Vertical line with grow](http://app.moptym.com/vue-waterfall/demo/vertical-line-with-grow.html)



## Installation



```shell

npm install --save vue-waterfall

```



## Usage



Vue-waterfall is a [UMD](https://github.com/umdjs/umd) module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, `Waterfall` will be registered as a global variable.



### Import



#### ES6



```js

/* in xxx.vue */



import Waterfall from 'vue-waterfall/lib/waterfall'

import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'



/*

 * or use ES5 code (vue-waterfall.min.js) :

 * import { Waterfall, WaterfallSlot } from 'vue-waterfall'

 */



export default {

  ...

  components: {

    Waterfall,

    WaterfallSlot

  },

  ...

}

```



#### ES5



```js

var Vue = require('vue')

var Waterfall = require('vue-waterfall')



var YourComponent = Vue.extend({

  ...

  components: {

    'waterfall': Waterfall.waterfall,

    'waterfall-slot': Waterfall.waterfallSlot

  },

  ...

})

```



#### Browser



```html



```



```js

new Vue({

  ...

  components: {

    'waterfall': Waterfall.waterfall,

    'waterfall-slot': Waterfall.waterfallSlot

  },

  ...

})

```



### HTML structure



```html



  

  

    

  



```



## Props



### waterfall



    

        

            Name

            Default

            Description

        

    

    

        

            line

            v

            v or h . Line direction.

        

        

            line-gap

            -

            Required. The standard space (px) between lines.

        

        

            min-line-gap

            = line-gap

            The minimal space between lines.

        

        

            max-line-gap

            = line-gap

            The maximal space between lines.

        

        

            single-max-width

            = max-line-gap

            The maximal width of slot which is single in horizontal direction.

        

        

            fixed-height

            false

            Fix slot height when line = v .

        

        

            grow

            -

            Number Array. Slot flex grow factors in horizontal direction when line = v . Ignore *-gap .

        

        

            align

            left

            left or right or center . Alignment.

        

        

            auto-resize

            true

            Reflow when window size changes.

        

        

            interval

            200

            The minimal time interval (ms) between reflow actions.

        

        

            watch

            {}

            Watch something, reflow when it changes.

        

    



### waterfall-slot



    

        

            Name

            Default

            Description

        

    

    

        

            width

            -

            Required. The width of slot.

        

        

            height

            -

            Required. The height of slot.

        

        

            order

            0

            The order of slot, often be set to index in v-for .

        

        

            key

            ''

            The unique identification of slot, required for transition.

        

        

            move-class

            -

            Class for transition. see vue-animated-list .

        

    



## Transition



Inspired by [vue-animated-list](https://github.com/vuejs/vue-animated-list) , vue-waterfall supports moving elements with `translate` in transition, click on the [demo](http://app.moptym.com/vue-waterfall/demo/vertical-line.html) page to see it.



vue-waterfall has not supported `` in Vue 2 ( [#10](https://github.com/MopTym/vue-waterfall/issues/10) ) .



![preview](shuffle.gif)



## Events



```js

ON ( 'reflow' ) {

  reflow

}

// trigger reflow action: waterfallVm.$emit('reflow')

```



```js

AFTER ( reflow ) {

  emit 'reflowed'

}

// waterfallVm.$on('reflowed', () => { console.log('reflowed') })

```



## Reactivity



```js

WHEN ( layout property changes ) { /* line, line-gap, etc. */

  reflow

}

```



```js

WHEN ( slot changes ) { /* add, remove, etc. */

  reflow

}

```



## License



Released under the [MIT](LICENSE) License.