Popover

HoverCardPopoverGitLab
Um diálogo não modal que flutua ao redor de um elemento de gatilho.

Uso

Use a Button or any other component in the default slot of the Popover.

Depois, use o slot #content para adicionar o conteúdo exibido quando o Popover está aberto.

<template>
  <NPopover>
    <NButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </NPopover>
</template>

Modo

Use a prop mode para alterar o modo do Popover. O padrão é click.

No modo hover, defina a prop enable-touch para permitir que os usuários abram e fechem o Popover tocando no gatilho em dispositivos de toque, ou use o modo click para gatilhos feitos para serem tocados.
<template>
  <NPopover mode="hover" enable-touch>
    <NButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </NPopover>
</template>
Ao usar o modo hover, o componente HoverCard do Reka UI é usado em vez do Popover.

Atraso

Ao usar o modo hover, você pode usar as props open-delay e close-delay para controlar o atraso antes de o Popover ser aberto ou fechado.

<template>
  <NPopover mode="hover" :open-delay="500" :close-delay="300">
    <NButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </NPopover>
</template>

Conteúdo

Use a prop content para controlar como o conteúdo do Popover é renderizado, como seu align ou side, por exemplo.

<template>
  <NPopover
    :content="{
      align: 'center',
      side: 'bottom',
      sideOffset: 8
    }"
  >
    <NButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </NPopover>
</template>

Seta

Use a prop arrow para exibir uma seta no Popover.

<template>
  <NPopover arrow>
    <NButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </NPopover>
</template>

Modal

Use a prop modal para controlar se o Popover bloqueia a interação com o conteúdo externo. O padrão é false.

<template>
  <NPopover modal>
    <NButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </NPopover>
</template>

Dispensável

Use a prop dismissible para controlar se o Popover pode ser dispensado ao clicar fora dele ou pressionar escape. O padrão é true.

Um evento close:prevent será emitido quando o usuário tentar fechá-lo.

Exemplos

Controlar o estado de abertura

Você pode controlar o estado de abertura usando a prop default-open ou a diretiva v-model:open.

Neste exemplo, aproveitando o defineShortcuts, você pode abrir e fechar o Popover pressionando O.

Com paleta de comandos

Você pode usar um componente CommandPalette dentro do conteúdo do Popover.

Com cursor que acompanha

Você pode fazer o Popover acompanhar o cursor ao passar o mouse sobre um elemento usando a prop reference:

Com slot de âncora

Você pode usar o slot #anchor para posicionar o Popover em relação a um elemento personalizado.

Este slot só funciona quando o mode é click.

API

Props

Prop Default Type
mode'click' M

The display mode of the popover.

content{ side: 'bottom', sideOffset: 8, collisionPadding: 8 } PopoverContentProps & Partial<EmitsToProps<PopoverContentImplEmits>>

The content of the popover.

arrowfalseboolean | PopoverArrowProps

Display an arrow alongside the popover.

portaltrue string | false | true | HTMLElement

Render the popover in a portal.

reference Element | VirtualElement

The reference (or anchor) element that is being referred to for positioning.

If not provided will use the current component as anchor.

dismissibletrueboolean

When false, the popover will not close when clicking outside or pressing escape.

defaultOpenboolean

The open state of the popover when it is initially rendered. Use when you do not need to control its open state.

openboolean

The controlled open state of the popover.

modalfalseboolean

The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.

openDelay0 number

The duration from when the mouse enters the trigger until the hover card opens.

closeDelay0 number

The duration from when the mouse leaves the trigger or content until the hover card closes.

ui { content?: SlotClass; arrow?: SlotClass; }

Slots

Slot Type
default{ open: boolean; }
contentSlotProps<M>
anchorSlotProps<M>
A função close só está disponível quando o mode é definido como click, porque o Reka UI a expõe para o Popover, mas não para o HoverCard.

Emits

Event Type
close:prevent[]
update:open[value: boolean]

Tema

app.config.ts
export default defineAppConfig({
  ui: {
    popover: {
      slots: {
        content: 'bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto',
        arrow: 'fill-default'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        popover: {
          slots: {
            content: 'bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto',
            arrow: 'fill-default'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Modal

Uma janela de diálogo que pode ser usada para exibir uma mensagem ou solicitar a entrada do usuário.

Slideover

Um diálogo que desliza a partir de qualquer lado da tela.