mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
111 lines
3.0 KiB
Vue
111 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
const items = [
|
|
{
|
|
label: 'Guide',
|
|
icon: 'i-heroicons-book-open',
|
|
children: [
|
|
{
|
|
label: 'Introduction',
|
|
description: 'Fully styled and customizable components for Nuxt.',
|
|
icon: 'i-heroicons-home'
|
|
},
|
|
{
|
|
label: 'Installation',
|
|
description: 'Learn how to install and configure Nuxt UI in your application.',
|
|
icon: 'i-heroicons-cloud-arrow-down'
|
|
},
|
|
{
|
|
label: 'Icons',
|
|
icon: 'i-heroicons-face-smile',
|
|
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
|
|
},
|
|
{
|
|
label: 'Colors',
|
|
icon: 'i-heroicons-swatch',
|
|
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
|
|
},
|
|
{
|
|
label: 'Theme',
|
|
icon: 'i-heroicons-cog',
|
|
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Composables',
|
|
icon: 'i-heroicons-circle-stack',
|
|
children: [
|
|
{
|
|
label: 'defineShortcuts',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Define shortcuts for your application.'
|
|
},
|
|
{
|
|
label: 'useModal',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Display a modal within your application.'
|
|
},
|
|
{
|
|
label: 'useSlideover',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Display a slideover within your application.'
|
|
},
|
|
{
|
|
label: 'useToast',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Display a toast within your application.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Components',
|
|
icon: 'i-heroicons-cube-transparent',
|
|
children: [
|
|
{
|
|
label: 'Link',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Use NuxtLink with superpowers.'
|
|
},
|
|
{
|
|
label: 'Modal',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Display a modal within your application.'
|
|
},
|
|
{
|
|
label: 'NavigationMenu',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Display a list of links.'
|
|
},
|
|
{
|
|
label: 'Pagination',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Display a list of pages.'
|
|
},
|
|
{
|
|
label: 'Popover',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Display a non-modal dialog that floats around a trigger element.'
|
|
},
|
|
{
|
|
label: 'Progress',
|
|
icon: 'i-heroicons-document-text-20-solid',
|
|
description: 'Show a horizontal bar to indicate task progression.'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
const active = ref('0')
|
|
|
|
// Note: This is for demonstration purposes only. Don't do this at home.
|
|
onMounted(() => {
|
|
setInterval(() => {
|
|
active.value = String((Number(active.value) + 1) % items.length)
|
|
}, 2000)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UNavigationMenu v-model="active" :items="items" class="justify-center" />
|
|
</template>
|