vue-stack-grid

WebJar for vue-stack-grid

License	ISC
GroupId	org.webjars.npm
ArtifactId	vue-stack-grid
Last Version	1.2.1
Release Date	Jul 26, 2020
Type	jar
Description	vue-stack-grid WebJar for vue-stack-grid
Project URL	https://www.webjars.org
Source Code Management	https://github.com/WouterFlorijn/vue-stack-grid

Download vue-stack-grid

Filename	Size
vue-stack-grid-1.2.1.pom
vue-stack-grid-1.2.1.jar	7 KB
vue-stack-grid-1.2.1-sources.jar	22 bytes
vue-stack-grid-1.2.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-stack-grid/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-stack-grid</artifactId>
    <version>1.2.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/vue-stack-grid/
implementation 'org.webjars.npm:vue-stack-grid:1.2.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/vue-stack-grid/
implementation ("org.webjars.npm:vue-stack-grid:1.2.1")

Apache Buildr

'org.webjars.npm:vue-stack-grid:jar:1.2.1'

Apache Ivy

<dependency org="org.webjars.npm" name="vue-stack-grid" rev="1.2.1">
  <artifact name="vue-stack-grid" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='vue-stack-grid', version='1.2.1')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "vue-stack-grid" % "1.2.1"

Leiningen

[org.webjars.npm/vue-stack-grid "1.2.1"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : vue-images-loaded	jar	[1.1.2,2)

Project Modules

There are no modules declared in this project.

vue-stack-grid

Vue components for stack grid/waterfall/Pinterest type layouts. Inspired by react-stack-grid.

Demo

Coming soon. Please see react-stack-grid for an indication of the features.

Installation

NPM:

npm install --save vue-stack-grid

Usage

Basic

<template>
  <div>
    <stack :column-min-width="320" :gutter-width="8" :gutter-height="8">
      <stack-item v-for="(item, i) in items" :key="i">
        {{ item.someContent }}
      </stack-item>
    </stack>
  </div>
</template>

<script>
  import { Stack, StackItem } from 'vue-stack-grid';

  export default {
    components: { Stack, StackItem }
  }
</script>

With animation

For animation, simply add style="transition: transform 300ms" to the stack-items.

With images

If images appear anywhere in the stack items, apply the monitor-images-loaded prop to the stack component.

Props

Stack

Name	Type	Required	Default	Description
column-min-width	Number	Yes		The minimum width of columns. If the columns do not fit into the container anymore, the number of columns is reduced.
gutter-width	Number	No	0	The space between columns in pixels.
gutter-height	Number	No	0	The space between items in the same column.
monitor-images-loaded	Boolean	No	false	If true, reflow once all images are loaded using vue-images-loaded. This is recommended if any of the stack items contain images, as the images might not be loaded yet when the initial positions and sizes are computed.

Note that gutter-width and gutter-height can also be replaced by adding margin/padding to the stack items.

Examples

Clone the repository and run: npm run examples

Future plans

• Handle adding/removing items.
• Add build system.
• Add demo.
• Please make feature requests if you have any!

Versions

Version
1.2.1 Jul 26, 2020