mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-21 15:31:46 +01:00
65 lines
1.1 KiB
Markdown
65 lines
1.1 KiB
Markdown
---
|
|
description: Display a non-modal dialog that floats around a trigger element.
|
|
links:
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Popover.vue
|
|
- label: 'Popover'
|
|
icon: i-simple-icons-headlessui
|
|
to: 'https://headlessui.com/vue/popover'
|
|
---
|
|
|
|
## Usage
|
|
|
|
::component-example
|
|
#default
|
|
:popover-example
|
|
#code
|
|
```vue
|
|
<template>
|
|
<UPopover>
|
|
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
|
|
|
|
<template #panel>
|
|
<!-- Content -->
|
|
</template>
|
|
</UPopover>
|
|
</template>
|
|
```
|
|
::
|
|
|
|
### Mode
|
|
|
|
Use the `mode` prop to switch between `click` and `hover` modes.
|
|
|
|
::component-example
|
|
#default
|
|
:popover-example-mode
|
|
#code
|
|
```vue
|
|
<template>
|
|
<UPopover mode="hover">
|
|
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
|
|
|
|
<template #panel>
|
|
<!-- Content -->
|
|
</template>
|
|
</UPopover>
|
|
</template>
|
|
```
|
|
::
|
|
|
|
## Slots
|
|
|
|
### `panel`
|
|
|
|
Use the `#panel` slot to fill the content of the panel.
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Preset
|
|
|
|
:component-preset
|