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
UPopover.vue
{ "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" }}