atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #67 from Gazoon007/feat/chroma-grid-demo-customize-component

Browse Source 
feat(ChromaGridDemo): integrate customize component
This commit is contained in:
David
2025-08-02 10:33:45 +03:00
committed by GitHub
parent f0d7ea7f5c 298ac645d8
commit bd3ad949a6
1 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/demo/Components/ChromaGridDemo.vue
View File

@@ -2,10 +2,21 @@
<TabbedLayout>
<template #preview>
<div class="demo-container relative overflow-hidden">
<ChromaGrid />
<ChromaGrid :radius="radius" :damping="damping" :fadeOut="fadeOut" :ease="ease" />
</div>
<Customize>
<PreviewSlider title="Radius" v-model="radius" :min="50" :max="600" :step="10" />
<PreviewSlider title="Damping" v-model="damping" :min="0.1" :max="5" :step="0.5" />
<PreviewSlider title="Fade Out" v-model="fadeOut" :min="0" :max="2" :step="0.1" />
<PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" />
</template>
@@ -20,14 +31,28 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { chromaGrid } from '../../constants/code/Components/chromaGridCode';
import ChromaGrid from '../../content/Components/ChromaGrid/ChromaGrid.vue';
import Customize from '@/components/common/Customize.vue';
import PreviewSelect from '@/components/common/PreviewSelect.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import { chromaGrid } from '../../constants/code/Components/chromaGridCode';
const radius = ref(300);
const damping = ref(0.45);
const fadeOut = ref(0.6);
const ease = ref('power3.out');
const easeOptions = [
{ label: 'Power3 Out', value: 'power3.out' },
{ label: 'Bounce Out', value: 'bounce.out' },
{ label: 'Elastic Out', value: 'elastic.out(1, 0.3)' }
];
const propData = [
{