overlays

Display a non-modal dialog that floats around a trigger element.

Usage

<template>
  <UPopover>
    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />

    <template #panel>
      <!-- Content -->
    </template>
  </UPopover>
</template>

Props

Prop Default Description
popper{}{}
mode"click"string
openDelay50number
closeDelay0number
disabledfalseboolean
uiappConfig.ui.popoverany

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

Made by