Usage
<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.
<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
ui
any
undefined
mode
"click" | "hover"
"click"
popper
{}
{}
openDelay
number
0
closeDelay
number
0
disabled
boolean
false
Preset
{ "wrapper": "relative", "container": "z-20", "width": "", "background": "bg-white dark:bg-gray-900", "shadow": "shadow-lg", "rounded": "rounded-md", "ring": "ring-1 ring-gray-200 dark:ring-gray-800", "base": "overflow-hidden focus:outline-none", "transition": { "enterActiveClass": "transition ease-out duration-200", "enterFromClass": "opacity-0 translate-y-1", "enterToClass": "opacity-100 translate-y-0", "leaveActiveClass": "transition ease-in duration-150", "leaveFromClass": "opacity-100 translate-y-0", "leaveToClass": "opacity-0 translate-y-1" }, "popper": { "strategy": "fixed" }}