Update UI Kit to V2
parent
a40bf84db2
commit
296cc217fb
|
@ -59,8 +59,8 @@ export default {
|
||||||
document.getElementById('app-doc').scrollIntoView({ behavior: 'smooth' });
|
document.getElementById('app-doc').scrollIntoView({ behavior: 'smooth' });
|
||||||
},
|
},
|
||||||
viewOnFigma() {
|
viewOnFigma() {
|
||||||
if (this.$appState.darkTheme) window.open('https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648', '_blank');
|
if (this.$appState.darkTheme) window.open('https://www.figma.com/file/lwsadx20eWq3UWS4eAxCYo/Preview-%7C-Dark-%7C-PrimeOne-%7C-2.0?node-id=806%3A36648&t=Qw2Pi6W4Q4rtbnZ5-1', '_blank');
|
||||||
else window.open('https://www.figma.com/file/c3BuENd8nGcyPmn7ADieee/Preview-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648', '_blank');
|
else window.open('https://www.figma.com/file/1rMJ9BAiZovyQYNUG06T0j/Preview-%7C-PrimeOne-%7C-2.0?node-id=806%3A36648&t=MnxlHT9snz8Y6DwL-1', '_blank');
|
||||||
},
|
},
|
||||||
viewOnGitHub() {
|
viewOnGitHub() {
|
||||||
EventBus.emit('view-github');
|
EventBus.emit('view-github');
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<div class="card mb-5" style="border-radius: 50px">
|
<div class="card mb-5" style="border-radius: 50px">
|
||||||
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
|
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
|
||||||
<div class="w-full md:w-6">
|
<div class="w-full md:w-6">
|
||||||
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-figma.png" class="w-full" />
|
<img alt="PrimeVue UI Kit" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-figma.png" class="w-full" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-6">
|
<div class="w-full md:w-6">
|
||||||
<div class="text-primary font-bold mb-2">UP-TO-DATE</div>
|
<div class="text-primary font-bold mb-2">UP-TO-DATE</div>
|
||||||
|
@ -37,6 +37,10 @@
|
||||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||||
<span class="font-bold">Interactive Components</span>
|
<span class="font-bold">Interactive Components</span>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="flex align-items-center w-12 p-3">
|
||||||
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||||
|
<span class="font-bold">Boolean, Instance Swap and Text Properties</span>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -94,7 +98,7 @@
|
||||||
|
|
||||||
<div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
|
<div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
|
||||||
<a
|
<a
|
||||||
href="https://www.figma.com/file/c3BuENd8nGcyPmn7ADieee/Preview-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648"
|
href="https://www.figma.com/file/1rMJ9BAiZovyQYNUG06T0j/Preview-%7C-PrimeOne-%7C-2.0?node-id=806%3A36648&t=MnxlHT9snz8Y6DwL-1"
|
||||||
class="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
|
class="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
|
||||||
style="border-radius: 50px"
|
style="border-radius: 50px"
|
||||||
>
|
>
|
||||||
|
@ -102,7 +106,7 @@
|
||||||
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-light.svg" class="w-4rem" />
|
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-light.svg" class="w-4rem" />
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648"
|
href="https://www.figma.com/file/lwsadx20eWq3UWS4eAxCYo/Preview-%7C-Dark-%7C-PrimeOne-%7C-2.0?node-id=806%3A36648&t=Qw2Pi6W4Q4rtbnZ5-1"
|
||||||
class="p-5 w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
|
class="p-5 w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
|
||||||
style="border-radius: 50px"
|
style="border-radius: 50px"
|
||||||
>
|
>
|
||||||
|
@ -313,7 +317,9 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
coverImage() {
|
coverImage() {
|
||||||
return this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpeg' : 'images/uikit/primeone-cover-light.jpeg';
|
const image = this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpg' : 'images/uikit/primeone-cover-light.jpg';
|
||||||
|
|
||||||
|
return 'https://primefaces.org/cdn/primevue/' + image;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 142 KiB |
Binary file not shown.
After Width: | Height: | Size: 258 KiB |
Binary file not shown.
Before Width: | Height: | Size: 134 KiB |
Binary file not shown.
After Width: | Height: | Size: 266 KiB |
Loading…
Reference in New Issue