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

Add auto-import guide

Browse source
This commit is contained in:
Cagatay Civici 2024-01-24 15:49:48 +03:00
parent 0996e90188
commit c3d791be08
9 changed files with 154 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

87
doc/setup/GuidesDoc.vue Normal file
View file

@ -0,0 +1,87 @@
<template>
<DocSectionText v-bind="$attrs"></DocSectionText>
<div class="flex gap-4">
<div class="card">
<NuxtLink to="/vite">
<span class="images">
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/vite.svg" />
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/vite-2.svg" class="original" />
</span>
<span class="title">VITE</span>
</NuxtLink>
</div>
<div class="card">
<NuxtLink to="/nuxt">
<span class="images">
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/nuxt.svg" />
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/nuxt-2.svg" class="original" />
</span>
<span class="title">NUXT</span>
</NuxtLink>
</div>
<div class="card">
<NuxtLink to="/cdn">
<span class="images">
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/html.svg" />
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/html-2.svg" class="original" />
</span>
<span class="title">CDN</span>
</NuxtLink>
</div>
</div>
</template>
<style scoped>
.card {
min-width: 15rem;
min-height: 15rem;
display: flex;
align-items: center;
justify-content: center;
}
.card a {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
}
.card .title {
font-size: 1rem;
font-weight: 500;
color: var(--text-color-secondary);
transition: all 0.5s;
}
.card .images {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card img {
height: 62px;
opacity: 1;
transition: all 0.5s;
}
.card img.original {
opacity: 0;
margin-top: -62px;
}
.card a:hover img {
opacity: 0;
}
.card a:hover img.original {
opacity: 1;
}
.card a:hover .title {
color: var(--text-color);
}
</style>