mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-23 16:30:45 +01:00
docs: update
This commit is contained in:
@@ -1,62 +1,18 @@
|
||||
---
|
||||
description: Display a non-modal dialog that floats around a trigger element.
|
||||
links:
|
||||
- label: 'Popover'
|
||||
icon: i-simple-icons-headlessui
|
||||
to: 'https://headlessui.com/vue/popover'
|
||||
- label: Radix Vue
|
||||
icon: i-custom-radix-vue
|
||||
to: https://www.radix-vue.com/components/popover.html
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Popover.vue
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Popover.vue
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
:component-example{component="popover-example"}
|
||||
## Examples
|
||||
|
||||
### Mode
|
||||
:component-api
|
||||
|
||||
Use the `mode` prop to switch between `click` and `hover` modes.
|
||||
|
||||
:component-example{component="popover-example-mode"}
|
||||
|
||||
### Manual
|
||||
|
||||
Use a `v-model:open` to manually control the state. In this example, press :shortcut{value="O"} to toggle the popover.
|
||||
|
||||
:component-example{component="popover-example-open"}
|
||||
|
||||
### Overlay
|
||||
|
||||
:component-example{component="popover-example-overlay"}
|
||||
|
||||
## 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
|
||||
:component-theme
|
||||
|
||||
Reference in New Issue
Block a user