Vue-stack-grid-component NPM

vue-stack-grid

Grid layout components for Vue.js, like Pinterest

vue-stack-grid

Live Demo

Install

You can install from npm or yarn

$ npm install vue-stack-grid-component
or
$ yarn add vue-stack-grid-component

Example

In Vue

<template>
  <div class="container">
    <StackGrid
      :columnWidth="200"
      :gutterX="20"
      :gutterY="20">
        <!-- you component like this -->
        <div class="stack-item"
          v-for="(item, index) in dataset" :key="index"
        >
          <!-- some thing have fixed height-->
        </div>
    </StackGrid>
  </div>
</template>
<script>
import StackGrid from 'vue-stack-grid-component'

export default {
  ...
  components: {
    StackGrid
  },
  ...
}
</script>

Props

Name	Type	Default	Description
columnWidth	Number	200	Specify column width as an number(px)
gutterX	Number	20	Adds horizontal space between item elements
gutterY	Number	20	Adds vertical space between item elements
center	Boolean	true	Specify that all columns are vertically centered
easing	String	'easeOut'	Specify a css valid transition-timing-function string
duration	String	'480ms'	Specify duration of animation in ms
delay	String	'0ms'	Specify delay of the initial animation in ms
order	Boolean	false	The order of item, left-to-right order

Transition-Timing-Function

linear easeIn easeOut easeInOut easeInSine easeOutSine ...

License

Released under the MIT License.

grid layout stack grid vuejs

@infinitebrahmanuniverse/nolb-vue-st @everything-registry/sub-chunk-3093

1.0.1

6 years ago

1.0.0

6 years ago