loading...
Events
onItemDidLayout
Type: Function, param: item
before render, and after single item layout compeleted
onContainerDidLayout
Type: Function
before render, and after container layout compeleted
Options
containerWidth
Type: Number, Default: null
container total width
containerHeight
Type: String || Number, Default: null
container total height
gridWidth
Type: Number, Default: 10
minimum single column width
prefixClassName
Type: String, Default: 'rc-autoresponsive'
container node's class name
itemClassName
Type: String, Default: 'item'
item selector
itemMargin
Type: Number, Default: 0
item margin
horizontalDirection
Type: String, Default: 'left'
horizontal direction
verticalDirection
Type: String, Default: 'top'
vertical direction
closeAnimation
Type: Boolean, Default: false
close animation
transitionDuration
Type: Number, Default: 1
transition duration, such as .8s
transitionTimingFunction
Type: String, Default: 'linear'
transition timing function, such as easeIn
Usage
Import
import AutoResponsive from 'autoresponsive-vue';
Vue.use(AutoResponsive);
0
1
2
3
4
5
6
7
8
9
Simplest example：
<template>
...
<auto-responsive
v-bind="options"
>
<div v-for="item in data" :style="style" class="item">{{ item }}</div>
</auto-responsive>
...
</template>
<script>
...
data() {
return {
data: [],
options: {
...
}
}
}
...
</script>
0
1
2
3
4
5
6
7
8
9
The completion of a waterfall layout becomes very easy.
<template>
...
<auto-responsive
v-bind="options"
>
<div v-for="item in data" :style="style" class="item">{{ item }}</div>
</auto-responsive>
...
</template>
<script>
...
data() {
return {
data: [],
options: {
...
}
}
}
...
</script>