mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
46 lines
2.0 KiB
TypeScript
46 lines
2.0 KiB
TypeScript
import code from "@content/Backgrounds/GridMotion/GridMotion.vue?raw";
|
|
import type { CodeObject } from "../../../types/code";
|
|
|
|
export const gridMotion: CodeObject = {
|
|
cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/GridMotion`,
|
|
installation: `npm i gsap`,
|
|
usage: `<template>
|
|
<GridMotion
|
|
:items="items"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import GridMotion from "./GridMotion.vue";
|
|
|
|
const items = [
|
|
'Item 1',
|
|
"<div key='jsx-item-1'>Custom JSX Content</div>",
|
|
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
|
'Item 2',
|
|
"<div key='jsx-item-2'>Custom JSX Content</div>",
|
|
'Item 4',
|
|
"<div key='jsx-item-2'>Custom JSX Content</div>",
|
|
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
|
'Item 5',
|
|
"<div key='jsx-item-2'>Custom JSX Content</div>",
|
|
'Item 7',
|
|
"<div key='jsx-item-2'>Custom JSX Content</div>",
|
|
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
|
'Item 8',
|
|
"<div key='jsx-item-2'>Custom JSX Content</div>",
|
|
'Item 10',
|
|
"<div key='jsx-item-3'>Custom JSX Content</div>",
|
|
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
|
'Item 11',
|
|
"<div key='jsx-item-2'>Custom JSX Content</div>",
|
|
'Item 13',
|
|
"<div key='jsx-item-4'>Custom JSX Content</div>",
|
|
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
|
'Item 14',
|
|
// Add more items as needed
|
|
];
|
|
</script>`,
|
|
code,
|
|
};
|