atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-04-22 01:54:38 -06:00
Code Issues Packages Projects Releases Wiki Activity

[ ADDED ] : Demo Background Content

Browse Source
This commit is contained in:
Utkarsh-Singhal-26
2025-07-18 12:27:18 +05:30
parent 47ef949cd2
commit ef2aa74f2c
16 changed files with 467 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo/Backgrounds/BeamsDemo.vue
+41 -43
View File
@@ -1,66 +1,66 @@
<template>
<div class="beams-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Beams
:beam-width="beamWidth"
:beam-height="beamHeight"
:beam-number="beamNumber"
:light-color="lightColor"
:speed="speed"
:noise-intensity="noiseIntensity"
:scale="scale"
:rotation="rotation"
/>
</div>
<TabbedLayout>
<template #preview>
<div class="h-[600px] overflow-hidden demo-container">
<Beams
:beam-width="beamWidth"
:beam-height="beamHeight"
:beam-number="beamNumber"
:light-color="lightColor"
:speed="speed"
:noise-intensity="noiseIntensity"
:scale="scale"
:rotation="rotation"
/>
<BackgroundContent pillText="New Background" headline="Radiant beams for creative user interfaces" />
</div>
<Customize>
<PreviewColor title="Color" v-model="lightColor" />
<Customize>
<PreviewColor title="Color" v-model="lightColor" />
<PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
<PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
<PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
<PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
<PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
<PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
</Customize>
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
</Customize>
<PropTable :data="propData" />
<PropTable :data="propData" />
<Dependencies :dependency-list="['three']" />
</template>
<Dependencies :dependency-list="['three']" />
</template>
<template #code>
<CodeExample :code-object="beams" />
</template>
<template #code>
<CodeExample :code-object="beams" />
</template>
<template #cli>
<CliInstallation :command="beams.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="beams.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import TabbedLayout from '@/components/common/TabbedLayout.vue';
import PropTable from '@/components/common/PropTable.vue';
import Dependencies from '@/components/code/Dependencies.vue';
import CliInstallation from '@/components/code/CliInstallation.vue';
import CodeExample from '@/components/code/CodeExample.vue';
import Dependencies from '@/components/code/Dependencies.vue';
import Customize from '@/components/common/Customize.vue';
import Beams from '@/content/Backgrounds/Beams/Beams.vue';
import PreviewColor from '@/components/common/PreviewColor.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import PropTable from '@/components/common/PropTable.vue';
import TabbedLayout from '@/components/common/TabbedLayout.vue';
import { beams } from '@/constants/code/Backgrounds/beamsCode';
import Beams from '@/content/Backgrounds/Beams/Beams.vue';
import { ref } from 'vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
const beamWidth = ref(3);
const beamHeight = ref(30);
@@ -125,8 +125,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
height: 500px;
}
</style>