mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-09 00:19:31 -06:00
101 lines
3.2 KiB
Vue
101 lines
3.2 KiB
Vue
<template>
|
|
<div class="curved-loop-demo">
|
|
<TabbedLayout>
|
|
<template #preview>
|
|
<div class="demo-container relative h-[500px] overflow-hidden p-0">
|
|
<CurvedLoop :key="rerenderKey" :marquee-text="marqueeText" :speed="speed" :curve-amount="curveAmount"
|
|
:interactive="interactive" />
|
|
</div>
|
|
|
|
<Customize>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2">Marquee Text</label>
|
|
<input v-model="marqueeText" type="text" placeholder="Enter text..."
|
|
class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
|
|
@input="forceRerender" />
|
|
</div>
|
|
|
|
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1"
|
|
@update:model-value="forceRerender" />
|
|
|
|
<PreviewSlider title="Curve Amount" v-model="curveAmount" :min="-400" :max="400" :step="10" value-unit="px"
|
|
@update:model-value="forceRerender" />
|
|
|
|
<PreviewSwitch title="Draggable" :model-value="interactive"
|
|
@update:model-value="(val: boolean) => { interactive = val; forceRerender() }" />
|
|
</Customize>
|
|
|
|
<PropTable :data="propData" />
|
|
</template>
|
|
|
|
<template #code>
|
|
<CodeExample :code-object="curvedLoop" />
|
|
</template>
|
|
|
|
<template #cli>
|
|
<CliInstallation :command="curvedLoop.cli" />
|
|
</template>
|
|
</TabbedLayout>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
|
import PropTable from '../../components/common/PropTable.vue'
|
|
import CliInstallation from '../../components/code/CliInstallation.vue'
|
|
import CodeExample from '../../components/code/CodeExample.vue'
|
|
import Customize from '../../components/common/Customize.vue'
|
|
import PreviewSlider from '../../components/common/PreviewSlider.vue'
|
|
import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
|
|
import CurvedLoop from '../../content/TextAnimations/CurvedLoop/CurvedLoop.vue'
|
|
import { curvedLoop } from '@/constants/code/TextAnimations/curvedLoopCode'
|
|
import { useForceRerender } from '@/composables/useForceRerender'
|
|
|
|
const marqueeText = ref('Be ✦ Creative ✦ With ✦ Vue ✦ Bits ✦')
|
|
const speed = ref(2)
|
|
const curveAmount = ref(400)
|
|
const interactive = ref(true)
|
|
|
|
const { rerenderKey, forceRerender } = useForceRerender()
|
|
|
|
const propData = [
|
|
{
|
|
name: 'marqueeText',
|
|
type: 'string',
|
|
default: '""',
|
|
description: 'The text to display in the curved marquee'
|
|
},
|
|
{
|
|
name: 'speed',
|
|
type: 'number',
|
|
default: '2',
|
|
description: 'Animation speed of the marquee text'
|
|
},
|
|
{
|
|
name: 'className',
|
|
type: 'string',
|
|
default: 'undefined',
|
|
description: 'CSS class name for styling the text'
|
|
},
|
|
{
|
|
name: 'curveAmount',
|
|
type: 'number',
|
|
default: '400',
|
|
description: 'Amount of curve in the text path'
|
|
},
|
|
{
|
|
name: 'direction',
|
|
type: '"left" | "right"',
|
|
default: '"left"',
|
|
description: 'Initial direction of the marquee animation'
|
|
},
|
|
{
|
|
name: 'interactive',
|
|
type: 'boolean',
|
|
default: 'true',
|
|
description: 'Whether the marquee can be dragged by the user'
|
|
}
|
|
]
|
|
</script>
|