vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Migration of templates to TW

Browse source
This commit is contained in:
Cagatay Civici 2024-06-26 12:26:19 +03:00
parent 6d74929580
commit 5be4eb2d91
32 changed files with 7647 additions and 10842 deletions
Download patch file Download diff file Expand all files Collapse all files

17
apps/showcase/components/template/TemplateFeaturesAnimationInline.vue
View file

@ -1,14 +1,21 @@
<template>
<div ref="animationInlineRef" class="template-features-animation-right-inline">
<div class="template-features-animation-right-inline-tabs">
<div ref="animationInlineRef" class="w-full py-8 rounded-xl bg-surface-50 dark:bg-surface-800 relative flex flex-col items-center justify-center">
<div class="hidden sm:flex items-center gap-0.5 xl:gap-1 rounded-full border border-surface p-1 w-[90%] bg-surface-0 dark:bg-surface-900">
<template v-for="(data, index) in inlineFeaturesData" :key="index">
<button @click="handleBtnClick(data.id)" @mouseenter="enterCardArea(data.id)" @mouseleave="leaveCardArea" :class="`${!!(data.id === selectedID) && 'template-features-animation-right-inline-tabs-btnActive'}`">
<button
@click="handleBtnClick(data.id)"
@mouseenter="enterCardArea(data.id)"
@mouseleave="leaveCardArea"
:class="`flex-1 py-1 px-1 lg:px-2 rounded-full text-surface-900 dark:text-surface-0 border-none outline-none text-xs font-medium transition-all hover:bg-surface-200 dark:hover:bg-surface-700 cursor-pointer ${
data.id === selectedID ? 'bg-surface-200 dark:bg-surface-700' : 'bg-transparent'
}`"
>
{{ data.title }}
</button>
</template>
</div>
<div class="template-features-animation-right-inline-image">
<img :src="inlineFeaturesData[selectedID - 1].src" alt="Animation Inline Feature Image" />
<div class="w-[90%] h-fit overflow-hidden relative flex mt-5 rounded-lg shadow-[0px_0px_48px_0px_rgba(0,0,0,0.08)]">
<img class="max-h-96 w-full h-auto object-cover object-top flex" :src="inlineFeaturesData[selectedID - 1].src" alt="Animation Inline Feature Image" />
</div>
</div>
</template>