MotionSwipe

Một hàng có thao tác hiện ra khi vuốt và tùy chọn vuốt để loại bỏ.

WebReact NativeCử chỉ

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

App.jsx

import { useState } from 'react';
import { MotionList, MotionSwipe, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const inbox = [
  { id: 1, from: 'Design team', subject: 'New motion tokens are ready' },
  { id: 2, from: 'Build bot', subject: 'All checks passed on main' },
  { id: 3, from: 'Hana', subject: 'Lunch on Friday?' },
  { id: 4, from: 'Support', subject: 'Your export is complete' },
];

export default function App({ dismiss = 'end', spring = 'default' }) {
  const [messages, setMessages] = useState(inbox);
  const [pinned, setPinned] = useState([]);
  const remove = (id) => setMessages(messages.filter((message) => message.id !== id));
  const pin = (id) =>
    setPinned(pinned.includes(id) ? pinned.filter((item) => item !== id) : [...pinned, id]);

  return (
    <div className="stage">
      {/* The list animates rows that leave by a button and rows that come back. */}
      <MotionList
        className="rows"
        items={messages}
        renderItem={(message) => (
          <MotionSwipe
            className="row"
            contentClassName="content"
            dismiss={dismiss === 'none' ? undefined : dismiss}
            onDismiss={() => remove(message.id)}
            transition={motionTokens.spring[spring]}
            startActions={
              <button className="action pin" onClick={() => pin(message.id)}>
                {pinned.includes(message.id) ? 'Unpin' : 'Pin'}
              </button>
            }
            endActions={
              <button className="action archive" onClick={() => remove(message.id)}>
                Archive
              </button>
            }
          >
            <strong>
              {pinned.includes(message.id) ? '● ' : ''}
              {message.from}
            </strong>
            <span>{message.subject}</span>
          </MotionSwipe>
        )}
      />
      {messages.length === 0 && <p className="empty">Inbox zero.</p>}
      <button className="restore" onClick={() => setMessages(inbox)}>
        Restore messages
      </button>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px;
}

.rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  border-radius: 14px;
  background: #eaf6f0;
}

.content {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border: 1px solid #cfe8dc;
  border-radius: 14px;
  background: #fff;
  user-select: none;
}

.content strong {
  color: #0e2e24;
}

.content span {
  color: #5b616b;
}

.action {
  height: 100%;
  min-width: 88px;
  padding: 0 18px;
  border: 0;
  font:
    650 14px system-ui,
    sans-serif;
  color: #fff;
  cursor: pointer;
}

.archive {
  border-radius: 0 14px 14px 0;
  background: #176b52;
}

.pin {
  border-radius: 14px 0 0 14px;
  background: #2e8f6d;
}

.empty {
  margin: 12px 0;
  color: #5b616b;
  text-align: center;
}

.restore {
  justify-self: center;
  min-height: 40px;
  margin-top: 8px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

Cách dùng ngắn nhất

Row.jsx

<MotionSwipe
  endActions={<button onClick={() => archive(id)}>Archive</button>}
  dismiss="end"
  onDismiss={() => remove(id)}
>
  <MessagePreview />
</MotionSwipe>;

Những gì nó xử lý giúp bạn

Hàng bám theo thao tác kéo ngang, có lực cản khi kéo quá phần thao tác và dừng theo tốc độ bạn thả.
Với dismiss, vuốt dài hoặc hất mạnh sẽ trượt hàng ra, thu gọn chiều cao rồi gọi onDismiss(side).
Cuộn dọc vẫn hoạt động, và chỉ một hàng được mở.
Chạm vào hàng đang mở sẽ đóng nó, và focus bàn phím vào một thao tác sẽ làm nó hiện ra.

Dùng cho

Lưu trữ hoặc xóa trong hộp thư.
Ghim một cuộc trò chuyện.
Xóa một mục khỏi danh sách.

Props

Prop	Kiểu	Mặc định	Mô tả
`children`	`ReactNode`		Nội dung của hàng.
`startActions`	`ReactNode`		Hiện ở đầu dòng khi hàng bị kéo về phía cuối.
`endActions`	`ReactNode`		Hiện ở cuối dòng khi hàng bị kéo về phía đầu.
`dismiss`	`'start' \| 'end' \| 'both'`		Các phía mà vuốt dài hoặc hất sẽ xóa hàng.
`onDismiss`	`(side) => void`		Chạy sau khi hàng trượt ra và thu gọn; hãy xóa mục khỏi dữ liệu của bạn tại đây.
`onOpenChange`	`(side \| null) => void`		Chạy với phía đang mở, hoặc `null` khi hàng đóng lại.
`disabled`	`boolean`	`false`	Tắt vuốt.
`contentClassName`	`string`		Class cho nội dung hàng; `contentStyle` đặt style nội tuyến của nó.
`transition`	`Transition`	`spring`	Đường cong timing `{ duration, easing }` hoặc lò xo `{ tempo: 'spring', spring }`. Lò xo giữ đà khi bị ngắt.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

startActions hiện ra khi kéo về phía cuối dòng, endActions khi kéo về phía đầu dòng. Đặt nền cho nội dung hàng bằng contentClassName.

React Native dùng cùng props và cử chỉ.

Được dùng trong các ví dụ này

Hộp thưTab lọc có số đếm trực tiếp, hàng vuốt đi được và danh sách tự khép khoảng trống.MotionHighlightMotionListMotionSwipeMotionNumber