arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

playground(link): improve

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-22 12:49:59 +01:00
parent 4bd0d71875
commit 2fefa8ab74
1 changed files with 47 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
playground/pages/link.vue
View File

@@ -1,51 +1,55 @@
<template>
<div class="flex flex-col items-start gap-2 text-sm">
<ULink raw>
Button raw
</ULink>
<div class="flex items-center gap-4">
<div class="flex flex-col items-start gap-2 text-sm">
<ULink raw>
Button raw
</ULink>
<ULink active>
Button active
</ULink>
<ULink active class="font-medium" active-class="text-gray-900 dark:text-white">
Button active with class
</ULink>
<ULink active disabled>
Button active disabled
</ULink>
<ULink active>
Button active
</ULink>
<ULink active class="font-medium" active-class="text-gray-900 dark:text-white">
Button active with class
</ULink>
<ULink active disabled>
Button active disabled
</ULink>
<ULink>
Button inactive
</ULink>
<ULink class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
Button inactive with class
</ULink>
<ULink disabled>
Button inactive disabled
</ULink>
<ULink>
Button inactive
</ULink>
<ULink class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
Button inactive with class
</ULink>
<ULink disabled>
Button inactive disabled
</ULink>
</div>
<ULink to="/link" raw>
Link raw
</ULink>
<div class="flex flex-col items-start gap-2 text-sm">
<ULink to="/link" raw>
Link raw
</ULink>
<ULink to="/link">
Link active
</ULink>
<ULink to="/link" class="font-medium" active-class="text-gray-900 dark:text-white">
Link active with class
</ULink>
<ULink to="/link" disabled>
Link active disabled
</ULink>
<ULink to="/link">
Link active
</ULink>
<ULink to="/link" class="font-medium" active-class="text-gray-900 dark:text-white">
Link active with class
</ULink>
<ULink to="/link" disabled>
Link active disabled
</ULink>
<ULink to="/button">
Link inactive
</ULink>
<ULink to="/button" class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
Link inactive with class
</ULink>
<ULink to="/button" disabled>
Link inactive disabled
</ULink>
<ULink to="/button">
Link inactive
</ULink>
<ULink to="/button" class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
Link inactive with class
</ULink>
<ULink to="/button" disabled>
Link inactive disabled
</ULink>
</div>
</div>
</template>