vue-waterfall-eric

1.0.7 • Public • Published

vue-waterfall-eric

A waterfall layout component for Vue.js

Installation

npm install --save vue-waterfall-eric

Import

/* in main.js */
import Vue from "vue";
import Waterfall from 'vue-waterfall-eric'
import "animate.css"
 
Vue.use(Waterfall);
 
/* in xxx.vue */
<eric-waterfall :list="list" :column="2" :gap="2.6667" :height-extend-scale="44 / 164" :max-item-scale="2" animate="fadeInUp">
  <template scope="props">
    <eric-waterfall-slot :config="props.config">
      <div class="list-item">
        <div>
          <p>Picture{{ props.item.id }}</p>
        </div>
      </div>
      <div class="item-bottom" slot="bottom">
        <span>Extended area</span>
      </div>
    </eric-waterfall-slot>
  </template>
</eric-waterfall>

Browser

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="../lib/vue-waterfall-eric.min.js"></script>
new Vue({
  ...
  components: {
    ericWaterfall: waterfall.ericWaterfall
    ericWaterfallSlot: waterfall.ericWaterfallSlot
  },
  ...
})

Props

ericWaterfall

Name Type Default Description
list Array [] Data list.'picHeight' and 'picWidth' must be included in each item.Other attributes are inherited by ericWaterfallSlot
column Number 2 The number of columns.
gap Number 2.6667(vw) The space between the top, bottom and left of the inner element
heightExtendScale Number 44/164 Depth-width ratio of the extension area of the inner element
maxItemScale Number 2 Max depth-width ratio of the extension area of the inner element
animate String fadeInUp If the project import 'animate.css', you can use the 'animate.css' class

ericWaterfallSlot

props.item Inherited from the list item,has all the attributes of the list item

Package Sidebar

Install

npm i vue-waterfall-eric

Weekly Downloads

4

Version

1.0.7

License

MIT

Unpacked Size

37.4 kB

Total Files

3

Last publish

Collaborators

  • eric_g