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

feat(ChromaGridDemo): integrate customize component

Browse Source
This commit is contained in:
Alfarish Fizikri
2025-08-02 13:51:18 +07:00
parent f0d7ea7f5c
commit 298ac645d8
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> <TabbedLayout>
<template #preview> <template #preview>
<div class="demo-container relative overflow-hidden"> <div class="demo-container relative overflow-hidden">
<ChromaGrid /> <ChromaGrid :radius="radius" :damping="damping" :fadeOut="fadeOut" :ease="ease" />
</div> </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" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" /> <Dependencies :dependency-list="['gsap']" />
</template> </template>
@@ -20,14 +31,28 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue'; import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue'; import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue'; import Dependencies from '../../components/code/Dependencies.vue';
import PropTable from '../../components/common/PropTable.vue'; import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue'; import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { chromaGrid } from '../../constants/code/Components/chromaGridCode';
import ChromaGrid from '../../content/Components/ChromaGrid/ChromaGrid.vue'; 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 = [ const propData = [
{ {