mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-25 01:10:40 +01:00
feat(NavigationMenu): handle children on vertical orientation (#2384)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
GitHub
@@ -63,19 +63,19 @@ props:
|
||||
to: /composables
|
||||
children:
|
||||
- label: defineShortcuts
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Define shortcuts for your application.
|
||||
to: /composables/define-shortcuts
|
||||
- label: useModal
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a modal within your application.
|
||||
to: /composables/use-modal
|
||||
- label: useSlideover
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a slideover within your application.
|
||||
to: /composables/use-slideover
|
||||
- label: useToast
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a toast within your application.
|
||||
to: /composables/use-toast
|
||||
- label: Components
|
||||
@@ -84,27 +84,27 @@ props:
|
||||
active: true
|
||||
children:
|
||||
- label: Link
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Use NuxtLink with superpowers.
|
||||
to: /components/link
|
||||
- label: Modal
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a modal within your application.
|
||||
to: /components/modal
|
||||
- label: NavigationMenu
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a list of links.
|
||||
to: /components/navigation-menu
|
||||
- label: Pagination
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a list of pages.
|
||||
to: /components/pagination
|
||||
- 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.
|
||||
to: /components/popover
|
||||
- label: Progress
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Show a horizontal bar to indicate task progression.
|
||||
to: /components/progress
|
||||
- label: GitHub
|
||||
@@ -137,10 +137,14 @@ Each item can take a `children` array of objects with the following properties t
|
||||
|
||||
Use the `orientation` prop to change the orientation of the NavigationMenu.
|
||||
|
||||
When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
external:
|
||||
- items
|
||||
props:
|
||||
@@ -148,19 +152,78 @@ props:
|
||||
items:
|
||||
- - label: Guide
|
||||
icon: i-heroicons-book-open
|
||||
to: /getting-started
|
||||
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
|
||||
to: /composables
|
||||
children:
|
||||
- label: defineShortcuts
|
||||
icon: i-heroicons-document-text
|
||||
description: Define shortcuts for your application.
|
||||
to: /composables/define-shortcuts
|
||||
- label: useModal
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a modal within your application.
|
||||
to: /composables/use-modal
|
||||
- label: useSlideover
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a slideover within your application.
|
||||
to: /composables/use-slideover
|
||||
- label: useToast
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a toast within your application.
|
||||
to: /composables/use-toast
|
||||
- label: Components
|
||||
icon: i-heroicons-cube-transparent
|
||||
to: /components
|
||||
active: true
|
||||
children:
|
||||
- label: Link
|
||||
icon: i-heroicons-document-text
|
||||
description: Use NuxtLink with superpowers.
|
||||
to: /components/link
|
||||
- label: Modal
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a modal within your application.
|
||||
to: /components/modal
|
||||
- label: NavigationMenu
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a list of links.
|
||||
to: /components/navigation-menu
|
||||
- label: Pagination
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a list of pages.
|
||||
to: /components/pagination
|
||||
- label: Popover
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a non-modal dialog that floats around a trigger element.
|
||||
to: /components/popover
|
||||
- label: Progress
|
||||
icon: i-heroicons-document-text
|
||||
description: Show a horizontal bar to indicate task progression.
|
||||
to: /components/progress
|
||||
- - label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
badge: 3.8k
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
- label: Help
|
||||
icon: i-heroicons-question-mark-circle
|
||||
disabled: true
|
||||
class: 'data-[orientation=vertical]:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -322,19 +385,19 @@ props:
|
||||
to: /composables
|
||||
children:
|
||||
- label: defineShortcuts
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Define shortcuts for your application.
|
||||
to: /composables/define-shortcuts
|
||||
- label: useModal
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a modal within your application.
|
||||
to: /composables/use-modal
|
||||
- label: useSlideover
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a slideover within your application.
|
||||
to: /composables/use-slideover
|
||||
- label: useToast
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a toast within your application.
|
||||
to: /composables/use-toast
|
||||
- label: Components
|
||||
@@ -343,27 +406,27 @@ props:
|
||||
active: true
|
||||
children:
|
||||
- label: Link
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Use NuxtLink with superpowers.
|
||||
to: /components/link
|
||||
- label: Modal
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a modal within your application.
|
||||
to: /components/modal
|
||||
- label: NavigationMenu
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a list of links.
|
||||
to: /components/navigation-menu
|
||||
- label: Pagination
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a list of pages.
|
||||
to: /components/pagination
|
||||
- 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.
|
||||
to: /components/popover
|
||||
- label: Progress
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Show a horizontal bar to indicate task progression.
|
||||
to: /components/progress
|
||||
class: 'justify-center'
|
||||
@@ -414,19 +477,19 @@ props:
|
||||
to: /composables
|
||||
children:
|
||||
- label: defineShortcuts
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Define shortcuts for your application.
|
||||
to: /composables/define-shortcuts
|
||||
- label: useModal
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a modal within your application.
|
||||
to: /composables/use-modal
|
||||
- label: useSlideover
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a slideover within your application.
|
||||
to: /composables/use-slideover
|
||||
- label: useToast
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a toast within your application.
|
||||
to: /composables/use-toast
|
||||
- label: Components
|
||||
@@ -435,27 +498,27 @@ props:
|
||||
active: true
|
||||
children:
|
||||
- label: Link
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Use NuxtLink with superpowers.
|
||||
to: /components/link
|
||||
- label: Modal
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a modal within your application.
|
||||
to: /components/modal
|
||||
- label: NavigationMenu
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a list of links.
|
||||
to: /components/navigation-menu
|
||||
- label: Pagination
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Display a list of pages.
|
||||
to: /components/pagination
|
||||
- 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.
|
||||
to: /components/popover
|
||||
- label: Progress
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
icon: i-heroicons-document-text
|
||||
description: Show a horizontal bar to indicate task progression.
|
||||
to: /components/progress
|
||||
class: 'justify-center'
|
||||
@@ -479,6 +542,10 @@ name: 'navigation-menu-model-value-example'
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can switch the active item by pressing :kbd{value="1"}, :kbd{value="2"}, or :kbd{value="3"}.
|
||||
::
|
||||
|
||||
::tip
|
||||
You can also pass the `value` of one of the items if provided.
|
||||
::
|
||||
|
||||
Reference in New Issue
Block a user