LongPress

Обгортає будь-який елемент і генерує trigger після натискання з утриманням — вебверсія Haptic Touch. Поки елемент утримують, він повільно зменшується, тож користувач бачить, що щось відбувається. У Safari на macOS із трекпадом Force Touch сильний клік спрацьовує одразу.

Живе демо

Відкрити модальне вікно утриманням

Контекстне меню в поповері

Клік відкриває файл, довге натискання — його дії. Розмістіть long press у слоті за замовчуванням поповера й викликайте toggle(true) під час спрацювання.

Картка користувача з попереднім переглядом

Клікніть картку, щоб відкрити профіль; утримайте, щоб спершу зазирнути.

Швидка дія зі сповіщенням

source відрізняє утримання від force click у Safari.

Утримання для підтвердження

Довший delay і глибший scale для руйнівних дій. press-cancel пояснює, що пішло не так, коли користувач відпускає зарано.

Показати приховане значення

API-ключ

Використання

<template>
  <orio-long-press @trigger="openModal">
    <orio-button>Hold me</orio-button>
  </orio-long-press>

  <orio-modal v-bind="modalProps">
    <orio-view-text type="title">Hidden feature</orio-view-text>
    <orio-view-text>Opened by a long press.</orio-view-text>
    <orio-button @click="modalProps.show = false">Close</orio-button>
  </orio-modal>
</template>

<script setup>
const { modalProps, openModal } = useModal();
</script>

Контекстне меню в поповері

<template>
  <orio-popover position="bottom">
    <template #default="{ toggle }">
      <orio-long-press @trigger="toggle(true)">
        <orio-button variant="secondary" icon="file" @click="openFile">
          report.pdf
        </orio-button>
      </orio-long-press>
    </template>
    <template #content="{ toggle }">
      <div class="menu-panel">
        <orio-button
          v-for="action in fileActions"
          :key="action.label"
          variant="subdued"
          :icon="action.icon"
          @click="runFileAction(action, () => toggle(false))"
        >
          {{ action.label }}
        </orio-button>
      </div>
    </template>
  </orio-popover>
</template>

Картка користувача з попереднім переглядом

<template>
  <orio-popover position="bottom">
    <template #default="{ toggle }">
      <orio-long-press @trigger="toggle(true)">
        <button type="button" class="user-card" @click="openProfile">
          <img :src="user.avatar" :alt="user.name" draggable="false" />
          <orio-view-text type="subtitle">{{ user.name }}</orio-view-text>
        </button>
      </orio-long-press>
    </template>
    <template #content>
      <div class="user-peek">
        <orio-view-text type="title">{{ user.name }}</orio-view-text>
        <orio-view-text type="italics">{{ user.handle }}</orio-view-text>
        <orio-view-text>{{ user.bio }}</orio-view-text>
        <orio-view-text icon="map-pin">{{ user.location }}</orio-view-text>
      </div>
    </template>
  </orio-popover>
</template>

Утримання для підтвердження

<template>
  <orio-long-press
    :delay="1500"
    :scale="0.85"
    @trigger="deleteProject"
    @press-cancel="hintHoldLonger"
  >
    <orio-button icon="delete">Hold to delete project</orio-button>
  </orio-long-press>
</template>

Пропси

Проп	Тип	За замовчуванням	Опис
delay	number	500	Час утримання в мс до trigger
scale	number	0.95	Масштаб у момент спрацювання
forceTouch	boolean	true	Force click у Safari спрацьовує одразу й блокує Look Up
disabled	boolean	false	Без відгуку й подій; звичайні кліки працюють
moveTolerance	number	10	Зсув вказівника в px, що скасовує натискання

Події

Подія	Дані	Опис
trigger	(event: PointerEvent | MouseEvent, source: "hold" | "force")	Утримання досягло delay або стався force click
press-start	(event: PointerEvent)	Основний вказівник натиснуто
press-cancel	—	Натискання завершилося без спрацювання

trigger передає оригінальну подію, тож @trigger="openModal" анімує модальне вікно з натиснутого елемента.

Поведінка

• Клік, що йде після спрацювання, поглинається — обгорнута кнопка не активується вдруге. Коротке натискання — це звичайний клік.
• Активація з клавіатури (Enter / Space) ніколи не поглинається.
• Враховується лише ліва кнопка / основний вказівник. Ctrl+клік (жест контекстного меню в macOS) ігнорується.
• Зсув понад moveTolerance, вихід за межі елемента чи прокручування дотиком скасовують натискання.
• Поки палець натиснуто — зокрема після trigger, до відпускання, — виділення тексту, виноска iOS і нативне контекстне меню заблоковані. Решту часу текст усередині обгортки можна виділяти.
• З prefers-reduced-motion: reduce масштабування пропускається; trigger усе одно спрацьовує.

Підтримка браузерів

Довге натискання працює всюди. Force click використовує пропрієтарні події Safari webkitmouseforce* — Chrome, Firefox та iOS не надають даних про силу натискання на трекпад чи екран, тож там це звичайне довге натискання.

Доступність

Довге натискання не має клавіатурного відповідника. Переконайтеся, що дія за trigger доступна й іншим способом (кнопка меню, гаряча клавіша).