Usage

Example

Offset X : 5px

Offset Y : 5px

Columns : 5

Duration : 0.3s

Timing : ease ease-in ease-in-out ease-out

Code

<script setup lang="ts">
import MasonrySettings from '~/demos/MasonrySettings.vue'
import FluidContainer from '~/demos/FluidContainer.vue'
import Masonry from '~/Masonry.vue'
import { ref } from 'vue'

const items = ref([1, 2, 3])

const offsetX = ref(5)
const offsetY = ref(5)
const columns = ref(5)
const duration = ref(0.3)
const timing = ref('ease')
</script>

<template>
    <div class="example-container">
        <MasonrySettings
            v-model:duration="duration"
            v-model:offset-x="offsetX"
            v-model:offset-y="offsetY"
            v-model:columns="columns"
            v-model:timing="timing"
            v-model:items="items"
        />

        <Masonry
            :offset-x="`${offsetX}px`"
            :offset-y="`${offsetY}px`"
            :duration="`${duration}s`"
            :key="columns"
            :columns
            :timing
        >
            <FluidContainer
                v-for="num of items"
                :key="`${columns}-${num}`"
            >
                {{ num }}
            </FluidContainer>
        </Masonry>
    </div>
</template>

<style scoped lang="scss">
.example-container {
    min-height: 50vh;
}
</style>

Props

Prop	Description	Accepted Values	Type	Default	Required
timing	Transition timing function	-	string	'ease'	false
duration	Transition duration	-	string	'0.3s'	false
offsetY	Margin bottom offset	-	string	'5px'	false
offsetX	Gap offset	-	string	'5px'	false
columns	Number of columns	-	number	3	false