Popover

Компонент Popover в Naive UI предназначен для отображения всплывающего контента относительно целевого элемента. Он может использоваться для подсказок, всплывающих меню, диалоговых подсказок и других элементов интерфейса, которые требуют контекстного отображения.

Импорт и базовое использование

Для начала необходимо импортировать компонент из библиотеки:

import { NPopover, NButton } from 'naive-ui'

Базовый пример использования:

<template>
  <n-popover trigger="hover" placement="top">
    <template #trigger>
      <n-button>Наведи на меня</n-button>
    </template>
    <div>Содержимое всплывающей подсказки</div>
  </n-popover>
</template>

Ключевые моменты:

  • trigger — определяет событие, которое открывает Popover (hover, click, focus).
  • placement — положение всплывающего блока относительно триггера (top, bottom, left, right, а также комбинированные варианты вроде top-start).

Свойства Popover

  1. show-arrow (boolean) Отображает стрелку, указывающую на триггер. По умолчанию true.

  2. trigger (string) Событие активации Popover. Возможные значения: hover, click, focus, manual.

  3. placement (string) Расположение относительно элемента-триггера. Поддерживаются все стандартные позиции всплывающих элементов.

  4. to (string | HTMLElement) Указывает, куда будет монтироваться Popover в DOM. Можно передать селектор или объект DOM. Если не указано, используется body.

  5. show / v-model:show (boolean) Управление видимостью Popover программно. Позволяет открывать и закрывать Popover через реактивные переменные.

Программное управление

Popover поддерживает реактивное управление видимостью:

<template>
  <n-popover v-model:show="visible" trigger="manual">
    <template #trigger>
      <n-button @click="toggle">Открыть Popover</n-button>
    </template>
    <div>Содержимое управляемого Popover</div>
  </n-popover>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

function toggle() {
  visible.value = !visible.value
}
</script>

Это позволяет интегрировать Popover с внешними событиями или состояниями приложения.

Стилизация и кастомизация

Popover полностью настраиваемый:

  • border, shadow, padding можно задавать через CSS или классы.
  • Внутри Popover можно использовать любой компонент Naive UI или кастомный HTML-контент.
  • Для динамического контента можно использовать Vue слоты:
<n-popover>
  <template #trigger>
    <n-button>Меню</n-button>
  </template>
  <template #default>
    <n-list>
      <n-list-item>Пункт 1</n-list-item>
      <n-list-item>Пункт 2</n-list-item>
    </n-list>
  </template>
</n-popover>

Адаптивность и позиционирование

Popover автоматически позиционируется с учётом границ окна браузера. Если указано auto-placement, компонент подбирает оптимальное положение, чтобы избежать обрезки контента:

<n-popover placement="auto">
  <template #trigger>
    <n-button>Авто-позиция</n-button>
  </template>
  <div>Контент подстраивается под окно</div>
</n-popover>

Работа с задержкой отображения

Свойства show-delay и hide-delay позволяют задавать задержку перед открытием и закрытием Popover:

<n-popover trigger="hover" :show-delay="500" :hide-delay="200">
  <template #trigger>
    <n-button>Задержка появления</n-button>
  </template>
  <div>Контент с задержкой</div>
</n-popover>

Это полезно для создания более плавного UX при наведение курсора.

Вложенные Popover и динамические события

Popover можно вкладывать один в другой или использовать внутри таблиц, списков и модальных окон. Для этого важно использовать уникальные слоты и контролировать trigger и v-model:show, чтобы избежать конфликтов при наведении и клике.

Анимация появления

Popover поддерживает анимацию через CSS классы. По умолчанию используется плавное появление с масштабированием и прозрачностью, но при необходимости можно подключить кастомные анимации через transition:

<n-popover transition-name="fade-scale">
  <template #trigger>
    <n-button>Анимированный Popover</n-button>
  </template>
  <div>Контент с кастомной анимацией</div>
</n-popover>

Важные советы по использованию

  • Для простых подсказок лучше использовать trigger="hover"; для контекстных меню — trigger="click".
  • Использовать v-model:show для сложных сценариев, где Popover зависит от внешних событий.
  • Стараться минимизировать глубину вложенности Popover для избежания проблем с z-index и позиционированием.
  • Встроенные слоты позволяют легко интегрировать любой компонент Naive UI внутрь Popover, создавая динамичные интерфейсы.

Popover в Naive UI — мощный инструмент для построения интерактивного и контекстного интерфейса с полной кастомизацией и простым управлением состоянием.

Оглавление