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

Updated <LiquidChrome /> background

Browse Source
This commit is contained in:
Utkarsh-Singhal-26
2025-07-17 09:43:53 +05:30
parent 718c8db990
commit 7423b9e068
1 changed files with 12 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/demo/Backgrounds/LiquidChromeDemo.vue
View File

@@ -6,75 +6,17 @@
</div> </div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider :min="0" :max="1" :width="50" :step="0.1" v-model="baseColor[0]" title="Red" />
:min="0"
:max="1"
:width="50"
:step="0.1"
v-model="baseColor[0]"
title="Red"
@onChange="
(val: number) => {
baseColor[0] = val;
}
"
/>
<PreviewSlider <PreviewSlider :min="0" :max="1" :width="50" :step="0.1" v-model="baseColor[1]" title="Green" />
:min="0"
:max="1"
:width="50"
:step="0.1"
v-model="baseColor[1]"
title="Green"
@onChange="
(val: number) => {
baseColor[1] = val;
}
"
/>
<PreviewSlider <PreviewSlider :min="0" :max="1" :width="50" :step="0.1" v-model="baseColor[2]" title="Blue" />
:min="0"
:max="1"
:width="50"
:step="0.1"
v-model="baseColor[2]"
title="Blue"
@onChange="
(val: number) => {
baseColor[2] = val;
}
"
/>
<PreviewSlider <PreviewSlider :min="0" title="Speed" :max="5" :step="0.01" v-model="speed" />
:min="0"
title="Speed"
:max="5"
:step="0.01"
v-model="speed"
@update:model-value="
(val: number) => {
speed = val;
}
"
/>
<PreviewSlider <PreviewSlider :min="0.1" title="Amplitude" :max="1" :step="0.01" v-model="amplitude" />
:min="0.1"
title="Amplitude"
:max="1"
:step="0.01"
v-model="amplitude"
@update:model-value="
val => {
amplitude = val;
}
"
/>
<PreviewSwitch title="Enable Interaction" v-model="interactive" @update:model-value="forceRerender" /> <PreviewSwitch title="Enable Interaction" v-model="interactive" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
@@ -159,3 +101,9 @@ const propData = [
} }
]; ];
</script> </script>
<style scoped>
.demo-container {
padding: 0;
}
</style>