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
Use a v-model:open to manually control the state. In this example, press O to toggle the popover.
<script setup lang="ts">
const open = ref(true)
defineShortcuts({
o: () => open.value = !open.value
})
</script>
<template>
<UPopover v-model:open="open">
<UButton color="white" :label="open.toString()" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>
Overlay
<template>
<UPopover overlay>
<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>
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
mode
"click" | "hover"
"click"ui
{ 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; leaveToC...
{}popper
PopperOptions
{}openDelay
number
config.default.openDelaycloseDelay
number
config.default.closeDelaydisabled
boolean
falseopen
boolean
undefinedoverlay
boolean
falseConfig
{
wrapper: 'relative',
container: 'z-50 group',
trigger: 'inline-flex w-full',
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'
},
overlay: {
base: 'fixed inset-0 transition-opacity z-50',
background: 'bg-gray-200/75 dark:bg-gray-800/75',
transition: {
enterActiveClass: 'ease-out duration-200',
enterFromClass: 'opacity-0',
enterToClass: 'opacity-100',
leaveActiveClass: 'ease-in duration-150',
leaveFromClass: 'opacity-100',
leaveToClass: 'opacity-0'
}
},
popper: {
strategy: 'fixed'
},
default: {
openDelay: 0,
closeDelay: 0
},
arrow: {
base: 'invisible before:visible before:block before:rotate-45 before:z-[-1] 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"
}
}