mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 04:29:37 +01:00
105 lines
2.3 KiB
Markdown
105 lines
2.3 KiB
Markdown
---
|
|
github: true
|
|
description: Display a list of actions in a dropdown menu.
|
|
headlessui:
|
|
label: 'Menu'
|
|
to: 'https://headlessui.com/vue/menu'
|
|
---
|
|
|
|
## Usage
|
|
|
|
Pass an array of arrays to the `items` prop of the Dropdown component. Each array represents a group of items. Each item can have the following properties:
|
|
|
|
- `label` - The label of the item.
|
|
- `icon` - The icon of the item.
|
|
- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/elements/avatar) component.
|
|
- `shortcuts` - The shortcuts of the item.
|
|
- `disabled` - Whether the item is disabled.
|
|
- `click` - The click handler of the item.
|
|
|
|
You can also pass properties from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
|
|
|
|
::component-example
|
|
#default
|
|
:dropdown-example-basic
|
|
|
|
#code
|
|
```vue
|
|
<script setup>
|
|
const items = [
|
|
[{
|
|
label: 'Profile',
|
|
avatar: {
|
|
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
|
}
|
|
}], [{
|
|
label: 'Edit',
|
|
icon: 'i-heroicons-pencil-square-20-solid',
|
|
shortcuts: ['E'],
|
|
click: () => {
|
|
console.log('Edit')
|
|
}
|
|
}, {
|
|
label: 'Duplicate',
|
|
icon: 'i-heroicons-document-duplicate-20-solid',
|
|
shortcuts: ['D'],
|
|
disabled: true
|
|
}], [{
|
|
label: 'Archive',
|
|
icon: 'i-heroicons-archive-box-20-solid'
|
|
}, {
|
|
label: 'Move',
|
|
icon: 'i-heroicons-arrow-right-circle-20-solid'
|
|
}], [{
|
|
label: 'Delete',
|
|
icon: 'i-heroicons-trash-20-solid',
|
|
shortcuts: ['⌘', 'D']
|
|
}]
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
|
|
<UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
|
|
</UDropdown>
|
|
</template>
|
|
```
|
|
::
|
|
|
|
### Mode
|
|
|
|
Use the `mode` prop to switch between `click` and `hover` modes.
|
|
|
|
::component-example
|
|
#default
|
|
:dropdown-example-mode
|
|
|
|
#code
|
|
```vue
|
|
<script setup>
|
|
const items = [
|
|
[{
|
|
label: 'Profile',
|
|
avatar: {
|
|
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
|
}
|
|
}]
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
|
|
<UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
|
|
</UDropdown>
|
|
</template>
|
|
```
|
|
::
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Preset
|
|
|
|
:component-preset
|