mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-04-22 01:54:38 -06:00
TS Fixes + Demo Cleanup
This commit is contained in:
David Haz
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[500px]">
|
||||
<RefreshButton @click="forceRerender" />
|
||||
<AnimatedContent
|
||||
:direction="direction"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[500px]">
|
||||
<ClickSpark
|
||||
:key="rerenderKey"
|
||||
:spark-color="sparkColor"
|
||||
@@ -87,10 +87,6 @@ const propData = [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.click-spark-demo-area {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Default</h2>
|
||||
|
||||
<div class="demo-container relative">
|
||||
<div class="demo-container h-[200px]">
|
||||
<CountUp
|
||||
:key="keyDefault"
|
||||
:from="from"
|
||||
@@ -19,9 +19,9 @@
|
||||
|
||||
<h2 class="demo-title-extra">Start Programmatically</h2>
|
||||
|
||||
<div class="demo-container flex flex-col justify-center items-center relative min-h-[200px]">
|
||||
<div class="demo-container h-[200px] flex-col justify-center items-center">
|
||||
<button
|
||||
class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4"
|
||||
class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2"
|
||||
@click="setStartCounting(true)"
|
||||
>
|
||||
Count to 500!
|
||||
@@ -166,10 +166,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
min-height: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div ref="containerRef" class="demo-container relative min-h-[300px] overflow-hidden">
|
||||
<div ref="containerRef" class="demo-container min-h-[300px] overflow-hidden">
|
||||
<Crosshair :container-ref="targeted ? containerElement : null" :color="color" />
|
||||
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[650px]">
|
||||
<div class="demo-container h-[700px]">
|
||||
<Cubes
|
||||
:borderStyle="borderStyle"
|
||||
:gridSize="gridSize"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="flex-col h-[500px] overflow-hidden demo-container">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<ElectricBorder
|
||||
v-if="example === 'card'"
|
||||
:color="cardProps.color"
|
||||
@@ -160,9 +160,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[500px]">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<FadeContent
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container min-h-[400px]">
|
||||
<div class="demo-container h-[400px]">
|
||||
<GlareHover
|
||||
background="#111"
|
||||
border-color="#222"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative flex-col h-[500px] overflow-hidden demo-container demo-container-dots">
|
||||
<div class="demo-container demo-container-dots h-[500px] overflow-hidden">
|
||||
<div
|
||||
ref="scrollRef"
|
||||
class="relative flex flex-col items-center px-6 py-[100px] w-full h-full overflow-x-hidden overflow-y-auto scrollContainer"
|
||||
@@ -237,10 +237,6 @@ const propData = [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.scrollContainer {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative h-[500px] overflow-hidden demo-container">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<LogoLoop
|
||||
:key="key"
|
||||
:logos="items"
|
||||
@@ -161,9 +161,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Container</h2>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[400px]">
|
||||
<Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength">
|
||||
<div class="magnet-container">Hover Me!</div>
|
||||
</Magnet>
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<h2 class="demo-title-extra">Link</h2>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[400px]">
|
||||
<Magnet
|
||||
:key="rerenderKey + 1"
|
||||
:padding="Math.floor(padding / 2)"
|
||||
@@ -119,11 +119,6 @@ const propData = [
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.magnet-container {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[600px] overflow-hidden">
|
||||
<MagnetLines
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
|
||||
@@ -140,9 +140,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<MetallicPaint
|
||||
v-if="imageData"
|
||||
:key="rerenderKey"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container min-h-[400px]">
|
||||
<div class="demo-container h-[400px]">
|
||||
<PixelTransition
|
||||
:key="key"
|
||||
:grid-size="gridSize"
|
||||
@@ -24,7 +24,7 @@
|
||||
</template>
|
||||
</PixelTransition>
|
||||
|
||||
<div class="mt-2 absolute bottom-[2em] text-[#a6a6a6]">Psst, hover the image!</div>
|
||||
<div class="mt-2 absolute bottom-[1em] text-[#a6a6a6]">Psst, hover the image!</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<div class="hover-text">Hover Me.</div>
|
||||
<Ribbons
|
||||
:base-thickness="baseThickness"
|
||||
@@ -177,13 +177,6 @@ const propData = [
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.count-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="shape-blur-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<ShapeBlur
|
||||
:variation="0"
|
||||
:pixel-ratio-prop="pixelRatioProp"
|
||||
@@ -121,9 +121,4 @@ const propData = [
|
||||
color: #222;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[400px]">
|
||||
<span class="text-6xl text-center text-[#333] font-black select-none">Move Your Cursor</span>
|
||||
</div>
|
||||
|
||||
@@ -142,11 +142,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
min-height: 300px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
class="flex-col bg-[linear-gradient(to_bottom,_#060010,_#0D0716,_#0D0716,_#060010)] h-[500px] overflow-hidden demo-container"
|
||||
class="bg-[linear-gradient(to_bottom,_#060010,_#0D0716,_#0D0716,_#060010)] h-[500px] overflow-hidden demo-container"
|
||||
>
|
||||
<StickerPeel
|
||||
:image-src="logo"
|
||||
@@ -143,9 +143,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -95,9 +95,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -98,9 +98,3 @@ const propData = [
|
||||
{ name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -144,9 +144,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -122,9 +122,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -194,9 +194,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -174,9 +174,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -182,9 +182,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -102,9 +102,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -49,9 +49,3 @@ const imageUrl =
|
||||
const numberOfImages = 30;
|
||||
const images = Array.from({ length: numberOfImages }, () => imageUrl);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -64,9 +64,3 @@ const options = [
|
||||
{ value: 'six', label: 'Deep' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -84,9 +84,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -116,9 +116,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -180,9 +180,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -72,9 +72,3 @@ const propData = [
|
||||
{ name: 'size', type: 'number', default: '1', description: 'Scale factor for the bolt size.' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative p-0 h-[600px] overflow-hidden demo-container">
|
||||
<div class="h-[600px] overflow-hidden demo-container">
|
||||
<LiquidChrome :baseColor="baseColor" :speed="speed" :amplitude="amplitude" :interactive="interactive" />
|
||||
<BackgroundContent pill-text="New Background" headline="Swirl around in the deep sea of liquid chrome!" />
|
||||
</div>
|
||||
@@ -103,9 +103,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -133,9 +133,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -190,9 +190,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -104,9 +104,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -166,9 +166,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -146,9 +146,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -168,9 +168,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -70,9 +70,3 @@ const propData = [
|
||||
{ name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -118,9 +118,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -79,9 +79,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -100,9 +100,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<AnimatedList
|
||||
:key="rerenderKey"
|
||||
:show-gradients="showGradients"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container bounce-cards-demo">
|
||||
<div class="demo-container h-[500px] bounce-cards-demo">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<BounceCards
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative h-[800px] overflow-hidden demo-container demo-container-dots">
|
||||
<div class="demo-container demo-container-dots h-[800px] overflow-hidden">
|
||||
<BubbleMenu
|
||||
:logo="logo"
|
||||
:menu-bg="menuBg"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
class="relative overflow-hidden demo-container demo-container-dots"
|
||||
class="demo-container demo-container-dots overflow-hidden"
|
||||
:style="{
|
||||
backgroundColor: currentTheme.backgroundColor,
|
||||
minHeight: '550px',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<div
|
||||
class="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center lg:items-start text-center lg:text-left pt-8 lg:pt-0 pb-4 lg:pb-0 px-4 lg:px-4"
|
||||
>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative overflow-hidden">
|
||||
<div class="demo-container overflow-hidden py-[64px]">
|
||||
<ChromaGrid :radius="radius" :damping="damping" :fadeOut="fadeOut" :ease="ease" />
|
||||
</div>
|
||||
|
||||
@@ -93,10 +93,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
height: auto;
|
||||
padding: 4em 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[400px] overflow-hidden relative">
|
||||
<div class="demo-container h-[400px] overflow-hidden">
|
||||
<Counter
|
||||
:value="value"
|
||||
:places="[100, 10, 1]"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="overflow: hidden">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<DecayCard>
|
||||
<div class="text-[2rem]">
|
||||
Decay
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[400px]">
|
||||
<Dock
|
||||
:key="rerenderKey"
|
||||
:items="items"
|
||||
@@ -140,10 +140,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
min-height: 400px;
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-section">
|
||||
<div class="demo-container relative min-h-[200px] flex items-center justify-center">
|
||||
<div class="demo-container h-[300px] overflow-hidden">
|
||||
<ElasticSlider />
|
||||
</div>
|
||||
</div>
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="demo-section">
|
||||
<h2 class="demo-title-extra">Using Steps</h2>
|
||||
|
||||
<div class="demo-container relative min-h-[200px] flex items-center justify-center">
|
||||
<div class="demo-container h-[300px] overflow-hidden">
|
||||
<ElasticSlider :is-stepped="true" :step-size="10" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="demo-section">
|
||||
<h2 class="demo-title-extra">Custom Range & Icons</h2>
|
||||
|
||||
<div class="demo-container relative min-h-[200px] flex items-center justify-center">
|
||||
<div class="demo-container h-[300px] overflow-hidden">
|
||||
<ElasticSlider :starting-value="500" :default-value="750" :max-value="1000">
|
||||
<template #left-icon>
|
||||
<i class="pi pi-thumbs-down text-xl"></i>
|
||||
@@ -103,11 +103,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
height: 300px;
|
||||
min-height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
|
||||
<div class="demo-container h-[600px] overflow-hidden py-[100px]">
|
||||
<FlowingMenu :items="demoItems" />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center">
|
||||
<div class="demo-container h-[600px] overflow-hidden">
|
||||
<FlyingPosters
|
||||
:key="rerenderKey"
|
||||
:items="items"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[500px]">
|
||||
<Folder :size="size" :color="color"></Folder>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 500px; overflow: hidden">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<GlassIcons :items="items" class="my-glass-icons" />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative overflow-y-auto no-scrollbar demo-container" ref="scrollContainerRef">
|
||||
<div class="overflow-y-auto no-scrollbar demo-container h-[500px]" ref="scrollContainerRef">
|
||||
<GlassSurface
|
||||
:key="key"
|
||||
:width="360"
|
||||
@@ -293,12 +293,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
.demo-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
class="demo-container relative h-[500px] overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center"
|
||||
>
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<GooeyNav
|
||||
:key="rerenderKey"
|
||||
:items="navItems"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative h-auto overflow-hidden demo-container">
|
||||
<div class="py-[100px] overflow-hidden demo-container">
|
||||
<MagicBento
|
||||
:enable-stars="enableStars"
|
||||
:enable-spotlight="enableSpotlight"
|
||||
@@ -133,9 +133,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative h-[500px] overflow-hidden demo-container">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<RefreshButton
|
||||
@refresh="
|
||||
() => {
|
||||
@@ -208,9 +208,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative py-10">
|
||||
<div class="demo-container py-10">
|
||||
<SpotlightCard class-name="custom-spotlight-card">
|
||||
<div class="flex h-full flex-col items-start justify-center">
|
||||
<i class="pi pi-star-fill text-4xl mb-3 text-white"></i>
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
<h2 class="text-xl font-semibold text-white mb-4 mt-8">Custom Color</h2>
|
||||
|
||||
<div class="demo-container relative py-10">
|
||||
<div class="demo-container py-10">
|
||||
<SpotlightCard class-name="custom-spotlight-card" spotlight-color="rgba(39, 255, 100, 0.326)">
|
||||
<div class="flex h-full flex-col items-start justify-center">
|
||||
<i class="pi pi-lock text-3xl mb-3 text-white"></i>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[500px]">
|
||||
<Stack
|
||||
:key="rerenderKey"
|
||||
:randomRotation="randomRotation"
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative demo-container h-[500px] overflow-hidden">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<Stepper
|
||||
:initial-step="step"
|
||||
:on-step-change="handleStepChange"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<TiltedCard
|
||||
image-src="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
|
||||
alt-text="Kendrick Lamar - GNX Album Cover"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[400px] overflow-hidden">
|
||||
<AsciiText
|
||||
:key="rerenderKey"
|
||||
:text="text"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative min-h-[400px] overflow-hidden">
|
||||
<div class="demo-container h-[400px] overflow-hidden">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<BlurText
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center">
|
||||
<div class="demo-container h-[400px] overflow-hidden">
|
||||
<CircularText
|
||||
:key="rerenderKey"
|
||||
text="VUE * BITS * IS * AWESOME * "
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden p-0">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<CurvedLoop
|
||||
:key="rerenderKey"
|
||||
:marquee-text="marqueeText"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative py-6 overflow-hidden">
|
||||
<div class="demo-container py-6 overflow-hidden">
|
||||
<RefreshButton @click="forceRerender" />
|
||||
|
||||
<div :key="key" class="pl-6 m-8 w-full flex flex-col justify-start items-start">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[400px] overflow-hidden p-0 flex justify-center items-center">
|
||||
<div class="demo-container h-[400px] overflow-hidden">
|
||||
<FallingText
|
||||
:key="key"
|
||||
text="Vue Bits is a library of animated and interactive Vue components designed to streamline UI development and simplify your workflow."
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center h-full">
|
||||
<FuzzyText
|
||||
:key="`main-${rerenderKey}`"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<GlitchText
|
||||
:children="text"
|
||||
:speed="speed"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Default</h2>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[200px]">
|
||||
<div class="text-[2rem]">
|
||||
<GradientText
|
||||
text="Add a splash of color!"
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
<h2 class="demo-title-extra">Border Animation</h2>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[200px]">
|
||||
<div class="text-[2rem]">
|
||||
<GradientText
|
||||
text="Now with a cool border!"
|
||||
@@ -128,9 +128,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
min-height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="min-h-[400px] demo-container">
|
||||
<div class="h-[400px] demo-container">
|
||||
<div
|
||||
class="flex flex-row justify-center items-center p-12 sm:p-20 md:p-24 w-full h-full overflow-hidden font-light text-[1.5rem] text-white sm:text-[1.875rem] md:text-[3rem] dark:text-muted leading-8 sm:leading-9 md:leading-none"
|
||||
>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div ref="containerRef" class="demo-container" @wheel="smoothScroll">
|
||||
<div ref="containerRef" class="demo-container overflow-y-auto h-[600px]" @wheel="smoothScroll">
|
||||
<div class="scroll-instruction">Scroll Down</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
@@ -158,11 +158,6 @@ const propData = [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
padding-top: 150vh !important;
|
||||
padding-bottom: 50vh;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div ref="containerRef" class="demo-container" @wheel="smoothScroll">
|
||||
<div ref="containerRef" class="demo-container overflow-y-auto h-[600px]" @wheel="smoothScroll">
|
||||
<div class="scroll-instruction">Scroll Down</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
@@ -171,11 +171,6 @@ const propData = [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
padding: 150vh 2em 50vh 2em;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container overflow-hidden">
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<div class="relative flex justify-center items-center">
|
||||
<ScrollVelocity
|
||||
:texts="['Vue Bits', 'Scroll Down']"
|
||||
@@ -124,9 +124,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Basic</h2>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[200px]">
|
||||
<ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
|
||||
</div>
|
||||
|
||||
<h2 class="demo-title-extra">Button Text</h2>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[200px]">
|
||||
<div class="shiny-button">
|
||||
<ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
|
||||
</div>
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
<h2 class="demo-title-extra">Configurable Speed</h2>
|
||||
|
||||
<div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
|
||||
<div class="demo-container h-[200px]">
|
||||
<ShinyText
|
||||
:text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
|
||||
:disabled="false"
|
||||
@@ -85,10 +85,6 @@ const propData = [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.shiny-button {
|
||||
padding: 12px 24px;
|
||||
border-radius: 50px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[400px]">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<SplitText
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container min-h-[400px]">
|
||||
<div class="demo-container h-[400px]">
|
||||
<TextPressure
|
||||
:key="rerenderKey"
|
||||
:text="text"
|
||||
|
||||
@@ -143,9 +143,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container py-[64px] h-[350px]">
|
||||
<TextType
|
||||
:key="key"
|
||||
:text="texts"
|
||||
@@ -216,13 +216,4 @@ const propData = [
|
||||
font-size: clamp(1.5rem, 4vw, 4rem);
|
||||
font-weight: 700;
|
||||
}
|
||||
.demo-container {
|
||||
padding: 64px;
|
||||
min-height: 350px;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="demo-container h-[400px]">
|
||||
<div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
|
||||
<TrueFocus :key="key" v-bind="config" />
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="demo-container relative min-h-[400px] overflow-hidden p-4 font-['Roboto_Flex',sans-serif]"
|
||||
>
|
||||
<div ref="containerRef" class="demo-container h-[400px] overflow-hidden font-['Roboto_Flex',sans-serif]">
|
||||
<VariableProximity
|
||||
label="Hover me! And then star Vue Bits on GitHub, or else..."
|
||||
class-name="variable-proximity-demo"
|
||||
|
||||
Reference in New Issue
Block a user