Popover - Nuxt UI

Usage

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

Mode

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

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

Manual

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"
}

Overlay

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

Popper

Use the popper prop to customize the popper instance.

Arrow

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

Placement

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

Offset

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

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.

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

{ wrapper?: string; container?: string; trigger?: string; width?: string; background?: string; shadow?: string; rounded?: string; ring?: string; base?: string; transition?: DeepPartial<{ enterActiveClass: string; enterFromClass: string; enterToClass: string; leaveActiveClass: string; leaveFromClass: string; leaveToClass: string; }, any>; overlay?: DeepPartial<{ base: string; background: string; transition: { enterActiveClass: string; enterFromClass: string; enterToClass: string; leaveActiveClass: string; leaveFromClass: string; leaveToClass: string; }; }, any>; popper?: DeepPartial<{ strategy: string; }, any>; default?: DeepPartial<{ openDelay: number; closeDelay: number; }, any>; arrow?: DeepPartial<{ base: string; ring: string; rounded: string; background: string; shadow: string; placement: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }

{}

popper

PopperOptions

{}

openDelay

number

config.default.openDelay

closeDelay

number

config.default.closeDelay

disabled

boolean

false

open

boolean

undefined

overlay

boolean

false

Config

{
  "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.