Popover - Nuxt UI

Usage

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Use the mode prop to switch between click and hover modes.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Use a v-model:open to manually control the state. In this example, press O to toggle the popover.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Use the popper prop to customize the popper instance.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

mode

"click" | "hover"

"click"

any

{}

popper

PopperOptions

{}

openDelay

number

config.default.openDelay

closeDelay

number

config.default.closeDelay

disabled

boolean

false

open

boolean

undefined

overlay

boolean

false

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Pagination

Add a pagination to handle pages.

Progress

Show a horizontal bar to indicate task progression.