mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
33 lines
972 B
TypeScript
33 lines
972 B
TypeScript
import code from '@content/Components/Masonry/Masonry.vue?raw'
|
|
import type { CodeObject } from '../../../types/code'
|
|
|
|
export const masonry: CodeObject = {
|
|
cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Masonry`,
|
|
installation: `npm install gsap`,
|
|
usage: `<template>
|
|
<Masonry
|
|
:items="items"
|
|
:duration="0.6"
|
|
:stagger="0.05"
|
|
animate-from="bottom"
|
|
:scale-on-hover="true"
|
|
:hover-scale="0.95"
|
|
:blur-to-focus="true"
|
|
:color-shift-on-hover="false"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import Masonry from "./Masonry.vue"
|
|
|
|
const items = ref([
|
|
{ id: '1', img: 'https://picsum.photos/300/400?random=1', url: 'https://picsum.photos', height: 400 },
|
|
{ id: '2', img: 'https://picsum.photos/300/600?random=2', url: 'https://picsum.photos', height: 600 },
|
|
{ id: '3', img: 'https://picsum.photos/300/350?random=3', url: 'https://picsum.photos', height: 350 },
|
|
// ... more items
|
|
])
|
|
</script>`,
|
|
code
|
|
}
|