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

refactor(style): utilize tailwind instead of CSS

Browse Source
This commit is contained in:
Alfarish Fizikri
2025-07-24 05:07:27 +07:00
parent b4ff605c88
commit 39c9820182
2 changed files with 54 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo/Components/RollingGalleryDemo.vue
+35 -48
View File
@@ -1,45 +1,45 @@
<template>
<div class="rolling-gallery-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container" style="background: #060010; overflow: hidden; position: relative; min-height: 500px;">
<div class="flex h-full max-w-[600px] items-center justify-center flex-col">
<h2 class="mt-6 text-center absolute font-black top-4 md:top-4 whitespace-nowrap text-2xl md:text-5xl text-white">
Your trip to Thailand.
</h2>
<RollingGallery
:autoplay="autoplay"
:pause-on-hover="pauseOnHover"
:images="customImages.length > 0 ? customImages : undefined"
/>
</div>
<TabbedLayout>
<template #preview>
<div class="demo-container relative min-h-[500px] overflow-hidden">
<div class="flex h-full max-w-[600px] flex-col items-center justify-center">
<h2
class="absolute top-4 mt-6 whitespace-nowrap text-center font-black text-2xl text-white md:top-4 md:text-5xl"
>
Your trip to Thailand.
</h2>
<RollingGallery
:autoplay="autoplay"
:pause-on-hover="pauseOnHover"
:images="customImages.length > 0 ? customImages : undefined"
/>
</div>
</div>
<Customize>
<PreviewSwitch
title="Autoplay"
v-model="autoplay"
/>
<Customize>
<PreviewSwitch
title="Autoplay"
v-model="autoplay"
/>
<PreviewSwitch
title="Pause on Hover"
v-model="pauseOnHover"
/>
</Customize>
<PreviewSwitch
title="Pause on Hover"
v-model="pauseOnHover"
/>
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['motion-v']" />
</template>
<PropTable :data="propData" />
<Dependencies :dependency-list="['motion-v']" />
</template>
<template #code>
<CodeExample :code-object="rollingGallery" />
</template>
<template #code>
<CodeExample :code-object="rollingGallery" />
</template>
<template #cli>
<CliInstallation :command="rollingGallery.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="rollingGallery.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">
@@ -79,16 +79,3 @@ const propData = [
},
]
</script>
<style scoped>
.rolling-gallery-demo {
width: 100%;
}
.demo-container {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
</style>