mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 16:00:39 +01:00
67 lines
1.5 KiB
Markdown
67 lines
1.5 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{component="popover-example"}
|
|
|
|
### Mode
|
|
|
|
Use the `mode` prop to switch between `click` and `hover` modes.
|
|
|
|
:component-example{component="popover-example-mode"}
|
|
|
|
### Manual
|
|
|
|
Use the `open` prop to manually control showing the panel.
|
|
|
|
:component-example{component="popover-example-open"}
|
|
|
|
### Overlay
|
|
|
|
:component-example{component="popover-example-overlay"}
|
|
|
|
::callout{icon="i-heroicons-light-bulb"}
|
|
Clicking on the `overlay` emits `update:open`. If you are manually controlling the `open` prop, you will need to use a [`v-model` argument](https://vuejs.org/guide/components/v-model.html#v-model-arguments) (`v-model:open`).
|
|
::
|
|
|
|
## Popper
|
|
|
|
Use the `popper` prop to customize the popper instance.
|
|
|
|
### Arrow
|
|
|
|
:component-example{component="popover-example-arrow"}
|
|
|
|
### Placement
|
|
|
|
:component-example{component="popover-example-placement"}
|
|
|
|
### Offset
|
|
|
|
:component-example{component="popover-example-offset"}
|
|
|
|
## Slots
|
|
|
|
### `panel`
|
|
|
|
Use the `#panel` slot to fill the content of the panel. You will have access to the `open` property and the `close` method in the slot scope.
|
|
|
|
:component-example{component="popover-example-slot"}
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Config
|
|
|
|
:component-preset
|