Swipe Card Stack

Gắn stylesheet và script một lần, rồi đánh dấu chồng thẻ bằng data-swipe-stack. Mỗi thẻ là một .swipe-stack__card nằm trong .swipe-stack__deck; nút là <button> bất kỳ có data-swipe-stack-action:

<link rel="stylesheet" href="swipe-stack.css" />
<script src="swipe-stack.js" defer></script>

<section class="swipe-stack" data-swipe-stack data-swipe-stack-directions="left right up" aria-label="Điểm đến">
  <div class="swipe-stack__deck">
    <article class="swipe-stack__card" data-swipe-title="Hội An">…</article>
    <article class="swipe-stack__card" data-swipe-title="Đà Lạt">…</article>
    <div class="swipe-stack__empty">Hết rồi!</div>
  </div>
  <div class="swipe-stack__actions">
    <button class="swipe-stack__action" type="button" data-swipe-stack-action="undo" aria-label="Hoàn tác">…</button>
    <button class="swipe-stack__action" type="button" data-swipe-stack-action="left" aria-label="Bỏ qua">…</button>
    <button class="swipe-stack__action" type="button" data-swipe-stack-action="up" aria-label="Siêu thích">…</button>
    <button class="swipe-stack__action" type="button" data-swipe-stack-action="right" aria-label="Thích">…</button>
  </div>
</section>

<script>
  document.querySelector(".swipe-stack").addEventListener("swipe", (event) => {
    const { direction, index, card } = event.detail; // "left" | "right" | "up"
  });
</script>

Tuỳ chọn qua data attribute:

Attribute	Mặc định	Tác dụng
data-swipe-stack-directions	"left right"	Thẻ được quẹt về những hướng nào; thêm up để có siêu thích
data-swipe-stack-loop	tắt	Hết thẻ thì quay lại thẻ đầu thay vì hiện ô hết thẻ
data-swipe-stack-visible	3	Hiện bao nhiêu thẻ cùng lúc, tính cả thẻ trên cùng
data-swipe-stack-threshold	0.35	Phải kéo bao xa (tính theo bề ngang thẻ; theo chiều cao nếu kéo lên)
data-swipe-stack-velocity	0.45	Búng nhanh cỡ nào thì thẻ đi luôn dù kéo ngắn (px mỗi ms)
data-swipe-stack-rotation	14	Thẻ nghiêng bao nhiêu độ khi kéo được một bề ngang thẻ
data-swipe-stack-duration	420	Thời gian lâu nhất để thẻ bay đi hoặc quay lại (ms)
data-swipe-stack-stamp-left, -right, -up	NOPE, LIKE, SUPER	Chữ trên các con dấu

Chồng thẻ phát các sự kiện swipe, undo (cả hai kèm { direction, index, card }) và empty ngay trên phần tử của nó. Tên được đọc lên của một thẻ là data-swipe-title, nếu không có thì aria-label, rồi đến tiêu đề đầu tiên trong thẻ. Phần tử nào trong thẻ không được phép bắt đầu thao tác kéo (thanh trượt, bản đồ…) thì thêm data-swipe-stack-no-drag.

SwipeStack.get(element) trả về handle của chồng thẻ đã được gắn — { swipe(direction), undo(), reset(), refresh(), canUndo(), current(), destroy() }; nhớ gọi refresh() sau khi thêm hoặc bớt thẻ. Chồng thẻ thêm vào sau khi trang đã tải: SwipeStack.init(container) — hàm này trả về một hàm để gỡ ra. Muốn truyền callback hay câu chữ đã dịch thì tự dựng: SwipeStack.create(element, { directions, loop, onSwipe, onUndo, onEmpty, texts }) (mọi câu chữ nó nói nằm trong core/texts.ts).

Thẻ bay sang ngang sẽ vượt qua mép màn hình: thêm overflow-x: clip cho trang (html, body { overflow-x: clip; }) để trang không bị nới rộng ra trong chốc lát.

Chép SwipeStack.tsx, swipe-stack.css và thư mục core vào dự án:

import { useRef } from "react";
import { SwipeStack } from "./SwipeStack";

export function Picker({ places }) {
  const stack = useRef(null);
  return (
    <>
      <SwipeStack
        ref={stack}
        aria-label="Điểm đến"
        items={places}
        itemKey={(place) => place.id}
        itemTitle={(place) => place.name}
        renderItem={(place) => <PlaceCard place={place} />}
        directions={["left", "right", "up"]}
        onSwipe={({ direction, item }) => save(item, direction)}
        empty={<p>Hết rồi!</p>}
      />
      <button type="button" onClick={() => stack.current?.undo()}>Hoàn tác</button>
    </>
  );
}

Hoặc truyền thẻ dưới dạng children: <SwipeStack>{cards}</SwipeStack>, mỗi child là một thẻ. Ref cho bạn { swipe(direction), undo(), reset() }. Mọi tuỳ chọn ở trên đều là prop (directions, loop, visible, threshold, velocity, rotation, duration, texts), thêm onSwipe, onUndo và onEmpty (onSwipe nhận cả item), actions={false} để bỏ các nút có sẵn, và mọi prop của <section> (className, aria-*…). React 18 hoặc 19.

Component bắt đầu bằng "use client", nên dùng được trong mọi page hay server component. Với App Router không cần làm gì thêm. Với Pages Router, chuyển dòng import CSS vào pages/_app.

Đặt các biến sau trên .swipe-stack (hoặc class của bạn):

Biến	Đổi gì
--swipe-stack-width, --swipe-stack-ratio, --swipe-stack-radius	Kích thước, tỉ lệ và bo góc của thẻ
--swipe-stack-surface, --swipe-stack-border, --swipe-stack-shadow, --swipe-stack-text	Bản thân tấm thẻ
--swipe-stack-left, --swipe-stack-right, --swipe-stack-up, --swipe-stack-undo	Màu dấu và nút, theo từng hướng
--swipe-stack-stamp-surface	Nền phía sau chữ trên dấu
--swipe-stack-offset, --swipe-stack-scale, --swipe-stack-fan	Các thẻ phía sau lùi xuống, thu nhỏ và xoè ra bao nhiêu
--swipe-stack-settle, --swipe-stack-ease	Các thẻ phía sau nhô lên nhanh chậm ra sao
--swipe-stack-button-size, --swipe-stack-button-small, --swipe-stack-button-surface	Các nút bấm
--swipe-stack-ring, --swipe-stack-gap	Viền focus, và khoảng cách giữa chồng thẻ với hàng nút

Màu dùng light-dark(): tự theo color-scheme của trang. Khi bật prefers-reduced-motion, thẻ được quẹt mờ dần tại chỗ thay vì bay đi, thẻ đang kéo không nghiêng, và các thẻ phía sau nhô lên mà không trượt.