Usage
<template>
<UPopover>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</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>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>
Manual New
Use the open prop to manually control showing the panel.
<script setup>
const open = ref(false)
</script>
<template>
<div class="flex gap-4 items-center">
<UToggle v-model="open" />
<UPopover :open="open">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</div>
</template>
Popper
Use the popper prop to customize the popper instance.
Arrow
<template>
<UPopover :popper="{ arrow: true }">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>
Placement
<template>
<UPopover :popper="{ placement: 'top-end' }">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>
Offset
<template>
<UPopover :popper="{ offsetDistance: 0 }">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>
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.
<template>
<UPopover>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel="{ close }">
<div class="p-8">
<UButton label="Close" @click="close" />
</div>
</template>
</UPopover>
</template>
Props
ui
any
undefinedpopper
{}
{}mode
"click" | "hover"
"click"openDelay
number
0closeDelay
number
0disabled
boolean
falseopen
boolean
undefinedConfig
{
"wrapper": "relative",
"container": "z-20 group",
"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 relative",
"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"
},
"arrow": {
"base": "before:w-2 before:h-2",
"ring": "before:ring-1 before:ring-gray-200 dark:before:ring-gray-800",
"rounded": "before:rounded-sm",
"background": "before:bg-gray-200 dark:before:bg-gray-800",
"shadow": "before:shadow",
"placement": "group-data-[popper-placement*=\"right\"]:-left-1 group-data-[popper-placement*=\"left\"]:-right-1 group-data-[popper-placement*=\"top\"]:-bottom-1 group-data-[popper-placement*=\"bottom\"]:-top-1"
}
}