vue-waterfall

A waterfall layout component for Vue.js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-waterfall
2,139381.0.67 years ago8 years agoMinified + gzip package size for vue-waterfall in KB

Readme

preview
vue-waterfall
Build Status Version License A waterfall layout component for Vue.js . Branch 0.x (version 0.x.x) is compatible with Vue 1 .

Demo

Installation

```shell npm install --save vue-waterfall ```

Usage

Vue-waterfall is a 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 v-for="(item, index) in items"
:width="item.width"
:height="item.height"
:order="index"
:key="item.id"
>
<!--
your component
-->
```

Props

waterfall

<thead>
<tr>
<th width="160">Name</th>
<th width="160">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>line</td>
<td><code>v</code></td>
<td><code>v</code> or <code>h</code> . Line direction.</td>
</tr>
<tr>
<td>line-gap</td>
<td>-</td>
<td>Required. The standard space (px) between lines.</td>
</tr>
<tr>
<td>min-line-gap</td>
<td>= line-gap</td>
<td>The minimal space between lines.</td>
</tr>
<tr>
<td>max-line-gap</td>
<td>= line-gap</td>
<td>The maximal space between lines.</td>
</tr>
<tr>
<td>single-max-width</td>
<td>= max-line-gap</td>
<td>The maximal width of slot which is single in horizontal direction.</td>
</tr>
<tr>
<td>fixed-height</td>
<td><code>false</code></td>
<td>Fix slot height when line = <code>v</code> .</td>
</tr>
<tr>
<td>grow</td>
<td>-</td>
<td>Number Array. Slot flex grow factors in horizontal direction when line = <code>v</code> . Ignore <code>*-gap</code> .</td>
</tr>
<tr>
<td>align</td>
<td><code>left</code></td>
<td><code>left</code> or <code>right</code> or <code>center</code> . Alignment.</td>
</tr>
<tr>
<td>auto-resize</td>
<td><code>true</code></td>
<td>Reflow when window size changes.</td>
</tr>
<tr>
<td>interval</td>
<td><code>200</code></td>
<td>The minimal time interval (ms) between reflow actions.</td>
</tr>
<tr>
<td>watch</td>
<td><code>{}</code></td>
<td>Watch something, reflow when it changes.</td>
</tr>
</tbody>

waterfall-slot

<thead>
<tr>
<th width="160">Name</th>
<th width="160">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>-</td>
<td>Required. The width of slot.</td>
</tr>
<tr>
<td>height</td>
<td>-</td>
<td>Required. The height of slot.</td>
</tr>
<tr>
<td>order</td>
<td><code>0</code></td>
<td>The order of slot, often be set to <code>index</code> in <code>v-for</code> .</td>
</tr>
<tr>
<td>key</td>
<td><code>''</code></td>
<td>The unique identification of slot, required for transition.</td>
</tr>
<tr>
<td>move-class</td>
<td>-</td>
<td>Class for transition. see <a href="https://github.com/vuejs/vue-animated-list" target="_blank">vue-animated-list</a> .</td>
</tr>
</tbody>

Transition

Inspired by vue-animated-list , vue-waterfall supports moving elements with translate in transition, click on the demo page to see it. vue-waterfall has not supported <transition-group> in Vue 2 ( #10 ) . preview

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.