Popover - Nuxt UI - Nuxt 框架

用法

<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 属性在 click 和 hover 模式之间切换。

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

手动

使用 v-model:open 手动控制状态。在这个示例中，按 O 切换弹出框。

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

遮罩

<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

使用 popper 属性自定义 Popper 实例。

箭头

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

位置

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

偏移

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

插槽

`面板`

使用 #panel 插槽填充面板的内容。你将在插槽作用域中访问到 open 属性和 close 方法。

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

{ 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.openDelay

closeDelay

number

config.default.closeDelay

disabled

boolean

false

open

boolean

undefined

overlay

boolean

false

Config

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

分页

添加分页来处理页面。

进度条

显示一个水平条来指示任务进度。