mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 17:00:36 +01:00
docs(navigation-menu): update
This commit is contained in:
Benjamin Canac
@@ -99,8 +99,12 @@ slots:
|
||||
:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here]
|
||||
::
|
||||
|
||||
::note
|
||||
You can pass an array of arrays to the `items` prop to create separated groups of items.
|
||||
::
|
||||
|
||||
::tip
|
||||
Each item can take a `children` array to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
|
||||
Each item can take a `children` array of objects with the same properties as the `items` prop to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
@@ -98,8 +98,12 @@ slots:
|
||||
:u-button{icon="i-heroicons-bars-3" color="gray" variant="outline"}
|
||||
::
|
||||
|
||||
::note
|
||||
You can pass an array of arrays to the `items` prop to create separated groups of items.
|
||||
::
|
||||
|
||||
::tip
|
||||
Each item can take a `children` array to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
|
||||
Each item can take a `children` array of objects with the same properties as the `items` prop to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
|
||||
::
|
||||
|
||||
### Content
|
||||
|
||||
@@ -15,6 +15,273 @@ navigation:
|
||||
|
||||
## Usage
|
||||
|
||||
### Items
|
||||
|
||||
Use the `items` prop as an array of objects with the following properties:
|
||||
|
||||
- `label?: string`{lang="ts-type"}
|
||||
- `icon?: string`{lang="ts-type"}
|
||||
- `avatar?: AvatarProps`{lang="ts-type"}
|
||||
- `badge?: string | number | BadgeProps`{lang="ts-type"}
|
||||
- `trailingIcon?: string`{lang="ts-type"}
|
||||
- `class?: any`{lang="ts-type"}
|
||||
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
|
||||
- `select?(e: Event): void`{lang="ts-type"}
|
||||
|
||||
You can also pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
external:
|
||||
- items
|
||||
props:
|
||||
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 gray 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-20-solid
|
||||
description: Define shortcuts for your application.
|
||||
to: /composables/define-shortcuts
|
||||
- label: useModal
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
description: Display a modal within your application.
|
||||
to: /composables/use-modal
|
||||
- label: useSlideover
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
description: Display a slideover within your application.
|
||||
to: /composables/use-slideover
|
||||
- label: useToast
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
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-20-solid
|
||||
description: Use NuxtLink with superpowers.
|
||||
to: /components/link
|
||||
- label: Modal
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
description: Display a modal within your application.
|
||||
to: /components/modal
|
||||
- label: NavigationMenu
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
description: Display a list of links.
|
||||
to: /components/navigation-menu
|
||||
- label: Pagination
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
description: Display a list of pages.
|
||||
to: /components/pagination
|
||||
- label: Popover
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
description: Display a non-modal dialog that floats around a trigger element.
|
||||
to: /components/popover
|
||||
- label: Progress
|
||||
icon: i-heroicons-document-text-20-solid
|
||||
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: 'justify-center'
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
You can pass an array of arrays to the `items` prop to display groups of items.
|
||||
::
|
||||
|
||||
::tip{class="[&_ul]:my-0 [&_ul]:marker:text-green-500/50 dark:[&_ul]:marker:text-green-400/50"}
|
||||
Each item can take a `children` array of objects with the following properties to create submenus:
|
||||
|
||||
- `label: string`
|
||||
- `description?: string`
|
||||
- `icon?: string`
|
||||
- `class?: any`
|
||||
- `select?(e: Event): void`
|
||||
::
|
||||
|
||||
### Orientation
|
||||
|
||||
Use the `orientation` prop to change the orientation of the NavigationMenu.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
external:
|
||||
- items
|
||||
props:
|
||||
orientation: 'vertical'
|
||||
items:
|
||||
- - label: Guide
|
||||
icon: i-heroicons-book-open
|
||||
- label: Composables
|
||||
icon: i-heroicons-circle-stack
|
||||
to: /composables
|
||||
- label: Components
|
||||
icon: i-heroicons-cube-transparent
|
||||
to: /components
|
||||
active: true
|
||||
- - label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
badge: 3.8k
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
Groups will be spaced between each other when orientation is `horizontal` and separated by a line when orientation is `vertical`.
|
||||
::
|
||||
|
||||
### Highlight
|
||||
|
||||
Use the `highlight` prop to display a highlighted border for the active item.
|
||||
|
||||
Use the `highlight-color` prop to change the color of the border. It defaults to the `color` prop.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
collapse: true
|
||||
ignore:
|
||||
- items
|
||||
- highlight
|
||||
- class
|
||||
external:
|
||||
- items
|
||||
props:
|
||||
highlight: true
|
||||
highlightColor: ''
|
||||
orientation: 'horizontal'
|
||||
items:
|
||||
- - label: Guide
|
||||
icon: i-heroicons-book-open
|
||||
- label: Composables
|
||||
icon: i-heroicons-circle-stack
|
||||
to: /composables
|
||||
- label: Components
|
||||
icon: i-heroicons-cube-transparent
|
||||
to: /components
|
||||
active: true
|
||||
- - label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
badge: 3.8k
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-gray-200 dark:border-gray-800'
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
In this example, the `border-l` and `border-b` classes are applied to display a gray line, this is not done by default to let you have a clean slate to work with.
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
Use the `color` prop to change the color of the NavigationMenu.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
external:
|
||||
- items
|
||||
props:
|
||||
color: 'gray'
|
||||
items:
|
||||
- - label: Guide
|
||||
icon: i-heroicons-book-open
|
||||
- label: Composables
|
||||
icon: i-heroicons-circle-stack
|
||||
to: /composables
|
||||
- label: Components
|
||||
icon: i-heroicons-cube-transparent
|
||||
to: /components
|
||||
active: true
|
||||
- - label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
badge: 3.8k
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
---
|
||||
::
|
||||
|
||||
### Variant
|
||||
|
||||
Use the `variant` prop to change the variant of the NavigationMenu.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
external:
|
||||
- items
|
||||
props:
|
||||
color: 'gray'
|
||||
variant: 'link'
|
||||
highlight: false
|
||||
items:
|
||||
- - label: Guide
|
||||
icon: i-heroicons-book-open
|
||||
- label: Composables
|
||||
icon: i-heroicons-circle-stack
|
||||
to: /composables
|
||||
- label: Components
|
||||
icon: i-heroicons-cube-transparent
|
||||
to: /components
|
||||
active: true
|
||||
- - label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
badge: 3.8k
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
The `highlight` prop changes the `pill` variant active item style. Try it out to see the difference.
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
## API
|
||||
|
||||
Reference in New Issue
Block a user