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

Simplify demo components

Browse Source
This commit is contained in:
David Haz
2025-07-14 21:09:53 +03:00
parent a65db3c807
commit 07ce88d997
53 changed files with 2254 additions and 2453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/demo/Animations/FadeContentDemo.vue
View File

@@ -1,80 +1,78 @@
<template>
<div class="fade-content-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container">
<RefreshButton @refresh="forceRerender" />
<TabbedLayout>
<template #preview>
<div class="demo-container">
<RefreshButton @refresh="forceRerender" />
<FadeContent
:key="rerenderKey"
:blur="blur"
:duration="duration"
:delay="delay"
:threshold="threshold"
:initial-opacity="initialOpacity"
:easing="easing"
class="fade-content-demo-content"
>
<div class="demo-content">
<h4>Fade Content</h4>
<FadeContent
:key="rerenderKey"
:blur="blur"
:duration="duration"
:delay="delay"
:threshold="threshold"
:initial-opacity="initialOpacity"
:easing="easing"
class="fade-content-demo-content"
>
<div class="demo-content">
<h4>Fade Content</h4>
<p>It will fade in when it enters the viewport.</p>
</div>
</FadeContent>
</div>
<p>It will fade in when it enters the viewport.</p>
</div>
</FadeContent>
</div>
<Customize>
<PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
<Customize>
<PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
<PreviewSlider
title="Duration (ms)"
v-model="duration"
:min="100"
:max="3000"
:step="100"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Duration (ms)"
v-model="duration"
:min="100"
:max="3000"
:step="100"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Delay (ms)"
v-model="delay"
:min="0"
:max="1000"
:step="50"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Delay (ms)"
v-model="delay"
:min="0"
:max="1000"
:step="50"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Threshold"
v-model="threshold"
:min="0.1"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Threshold"
v-model="threshold"
:min="0.1"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Initial Opacity"
v-model="initialOpacity"
:min="0"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
</Customize>
<PreviewSlider
title="Initial Opacity"
v-model="initialOpacity"
:min="0"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
</Customize>
<PropTable :data="propData" />
</template>
<PropTable :data="propData" />
</template>
<template #code>
<CodeExample :code-object="fadeContent" />
</template>
<template #code>
<CodeExample :code-object="fadeContent" />
</template>
<template #cli>
<CliInstallation :command="fadeContent.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="fadeContent.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">