SwipeActions

Дії під рядком списку, що відкриваються свайпом ліворуч, — як у мобільній пошті й месенджерах.

Рядок їде за пальцем ліворуч, і з-під нього з'являються кнопки дій. Відпустили далі половини їхньої ширини чи кидком — дії лишаються відкритими; інакше рядок повертається. Дотик по рядку, прокрутка, дотик повз чи свайп праворуч закривають дії. У межах group відкритим буває один рядок — як у списку чатів.

Приклад

На дотиковому екрані проведіть рядок ліворуч.

Звіт за кварталОновлено сьогодні
План запускуУчоразакріплено
Нотатки зустрічіПонеділок

Остання дія: Ще нічого

Жест — лише для пальця й пера: миша свайпом не користується, а ті самі дії мають бути доступні інакше — контекстним меню (UiContextMenu) чи кнопкою «Ще». Кнопки дій рендеряться лише поки рядок зсунуто, тож у довгому списку не множаться.

Кольори дій

tone — пара заливки й тексту з токенів: accent (головна дія), danger (видалення), neutral (архів). Власні кольори проєкту — через class дії: він замінює тон цілком, а не дописується поверх, тож на кнопці не буває двох bg-*.

<UiSwipeActions
  :actions="[
    { key: 'mute', label: 'Без звуку', class: 'bg-swipe-mute text-accent-contrast' },
    { key: 'archive', label: 'В архів', tone: 'neutral' },
  ]"
  @action="onAction"
>
  <template #icon="{ action }"><AppIcon :name="action.key" /></template>
  <RouterLink :to="…" class="flex h-16 items-center px-4">…</RouterLink>
</UiSwipeActions>

Жест і прокрутка

Корінь має touch-action: pan-y pinch-zoom: вертикальний рух лишається прокрутці списку, горизонтальний бере рядок. Жест не починається з полів, повзунків і елементів із touch-action: none; решту можна вимкнути атрибутом data-no-swipe або пропом disabled (наприклад, поки відкрите контекстне меню рядка). Ядро жесту — utils/swipe.ts — те саме, що в UiSwipeStack.

API

Props

Назва	Тип	Типово	Опис
`actions`*	`{ key: string; label: string; tone?: "danger" \| "accent" \| "neutral"; class?: string; }[]`	—	Дії під рядком у порядку зліва направо. Свайп ліворуч відкриває їх біля правого краю. `tone` — колір кнопки; `class` замінює його цілком (власні токени проєкту), а не дописується поверх.
`actionWidth`	`number`	`72`	Ширина однієї дії, px. Типово — квадрат на висоту рядка списку.
`group`	`string`	`"default"`	Група рядків: відкритим одночасно може бути лише один рядок групи — відкриття наступного закриває попередній.
`surfaceClass`	`string`	`"bg-card"`	Тло рухомого шару. Має бути непрозорим, інакше дії просвічують крізь рядок; задайте те саме тло, що в списку.
`disabled`	`boolean`	`false`	Вимкнути жест (наприклад, поки відкрите контекстне меню рядка).

Події

Назва	Payload	Опис
`action`	`[key: string]`	Натиснуто дію — у параметрі її `key`. Рядок після цього закривається сам.

Слоти

Назва	Опис
`default`	Рядок, що їде за пальцем.
`icon`	Іконка над підписом дії: `action` — сама дія з `actions`.

Коли використовувати

Для частих дій над рядком довгого списку на телефоні: закріпити, архівувати, вимкнути сповіщення, видалити. Свайп швидший за довге натискання й не потребує точного влучання в дрібну кнопку.

Коли НЕ використовувати

Не робіть свайп єдиним шляхом до дії: його не видно, а з мишею й клавіатурою його немає взагалі. Не кладіть під рядок більше трьох дій — на вузькому екрані рядок майже зникає. Для рядка з власною горизонтальною прокруткою (каруселі, таблиці) свайп конфліктуватиме з нею.

Доступність

Кнопки дій — звичайні <button> з підписом і видимим фокусом, але з'являються лише після жесту. Тому ті самі дії обов'язково дублюйте в контекстному меню чи меню «Ще»: скрінрідер і клавіатура доходять до них саме там.