arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-17 21:48:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(NavigationMenu): handle children on vertical orientation (#2384)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-22 22:52:38 +02:00
committed by GitHub
parent 69d7b57825
commit 34bddd45be
22 changed files with 277 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue
View File

@@ -37,22 +37,22 @@ const items = [
children: [
{
label: 'defineShortcuts',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Define shortcuts for your application.'
},
{
label: 'useModal',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a modal within your application.'
},
{
label: 'useSlideover',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a slideover within your application.'
},
{
label: 'useToast',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a toast within your application.'
}
]
@@ -63,45 +63,50 @@ const items = [
children: [
{
label: 'Link',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Use NuxtLink with superpowers.'
},
{
label: 'Modal',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a modal within your application.'
},
{
label: 'NavigationMenu',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a list of links.'
},
{
label: 'Pagination',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a list of pages.'
},
{
label: 'Popover',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a non-modal dialog that floats around a trigger element.'
},
{
label: 'Progress',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Show a horizontal bar to indicate task progression.'
}
]
}
]
const active = ref('0')
const active = ref()
// 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)
defineShortcuts({
1: () => {
active.value = '0'
},
2: () => {
active.value = '1'
},
3: () => {
active.value = '2'
}
})
</script>