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

playground: add link

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-21 14:58:38 +01:00
parent 4ba76f5a3f
commit b2b4804e78
2 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
playground/app.vue
View File

@@ -19,6 +19,7 @@ const components = [
'form-field', 'form-field',
'input', 'input',
'kbd', 'kbd',
'link',
'modal', 'modal',
'navigation-menu', 'navigation-menu',
'popover', 'popover',
@@ -36,7 +37,7 @@ function upperName (name: string) {
<template> <template>
<UProvider> <UProvider>
<UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center overflow-y-auto"> <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center overflow-y-auto">
<UNavigationMenu :links="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800" /> <UNavigationMenu :links="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800 overflow-x-auto" />
<div class="flex-1 flex flex-col justify-center pb-12"> <div class="flex-1 flex flex-col justify-center pb-12">
<NuxtPage /> <NuxtPage />

24
playground/pages/link.vue Normal file
View File

@@ -0,0 +1,24 @@
<script setup lang="ts">
const activeClass = 'text-primary-500 dark:text-primary-400'
const inactiveClass = 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
</script>
<template>
<div class="flex flex-col items-start gap-2 text-sm">
<ULink v-slot="{ active }" active :active-class="activeClass" :inactive-class="inactiveClass">
Button active ({{ active }})
</ULink>
<ULink v-slot="{ active }" disabled :active-class="activeClass" :inactive-class="inactiveClass">
Button disabled ({{ active }})
</ULink>
<ULink v-slot="{ active }" to="/link" :active-class="activeClass" :inactive-class="inactiveClass">
Link ({{ active }})
</ULink>
<ULink v-slot="{ active }" to="/link" disabled :active-class="activeClass" :inactive-class="inactiveClass">
Link disabled ({{ active }})
</ULink>
<ULink v-slot="{ active }" to="/modal" :active-class="activeClass" :inactive-class="inactiveClass">
Modal ({{ active }})
</ULink>
</div>
</template>