MotionSwipe

Baris dengan aksi yang muncul saat digeser dan opsi geser untuk membuang.

WebReact NativeGestur

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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;
}

Penggunaan terpendek

Row.jsx

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

Yang ditanganinya untuk Anda

Baris mengikuti seretan horizontal, menahan di luar aksinya, dan berhenti sesuai kecepatan lepasan Anda.
Dengan dismiss, geseran panjang atau lemparan meluncurkan baris keluar, menciutkan tingginya, lalu memanggil onDismiss(side).
Gulir vertikal tetap berfungsi, dan hanya satu baris yang tetap terbuka.
Mengetuk baris yang terbuka akan menutupnya, dan fokus keyboard pada sebuah aksi memunculkannya.

Gunakan untuk

Arsipkan atau hapus di kotak masuk.
Sematkan percakapan.
Hapus item dari daftar.

Props

Prop	Tipe	Bawaan	Deskripsi
`children`	`ReactNode`		Konten baris.
`startActions`	`ReactNode`		Muncul di awal inline saat baris diseret ke arah akhir.
`endActions`	`ReactNode`		Muncul di akhir inline saat baris diseret ke arah awal.
`dismiss`	`'start' \| 'end' \| 'both'`		Sisi tempat geseran panjang atau lemparan menghapus baris.
`onDismiss`	`(side) => void`		Berjalan setelah baris meluncur keluar dan menciut; hapus item dari data Anda di sini.
`onOpenChange`	`(side \| null) => void`		Berjalan dengan sisi yang terbuka, atau `null` saat baris tertutup.
`disabled`	`boolean`	`false`	Mematikan geser.
`contentClassName`	`string`		Class untuk konten baris; `contentStyle` mengatur gaya inline-nya.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

startActions muncul saat menyeret ke arah akhir inline, endActions saat menyeret ke arah awal. Beri konten baris latar belakang dengan contentClassName.

React Native memakai props dan gestur yang sama.

Dipakai di contoh-contoh ini

Kotak masukTab filter dengan hitungan langsung, baris yang bisa digeser pergi, dan daftar yang menutup celahnya.MotionHighlightMotionListMotionSwipeMotionNumber