MotionSwipe

Un rând cu acțiuni dezvăluite prin glisare și respingere opțională prin glisare.

WebReact NativeGesturi

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Cea mai scurtă utilizare

Row.jsx

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

Ce rezolvă în locul dumneavoastră

Rândul urmează tragerile orizontale, opune rezistență după acțiuni și se așază cu viteza eliberării.
Cu dismiss, o glisare lungă sau o aruncare scoate rândul, îi restrânge înălțimea și apoi apelează onDismiss(side).
Derularea verticală continuă să funcționeze și rămâne deschis un singur rând.
O atingere pe un rând deschis îl închide, iar focusul de tastatură pe o acțiune o dezvăluie.

Folosiți-o pentru

Arhivare sau ștergere într-un inbox.
Fixarea unei conversații.
Eliminarea unui element dintr-o listă.

Props

Prop	Tip	Implicit	Descriere
`children`	`ReactNode`		Conținutul rândului.
`startActions`	`ReactNode`		Dezvăluite la începutul rândului când rândul e tras spre capăt.
`endActions`	`ReactNode`		Dezvăluite la capătul rândului când rândul e tras spre început.
`dismiss`	`'start' \| 'end' \| 'both'`		Părțile în care o glisare lungă sau o aruncare elimină rândul.
`onDismiss`	`(side) => void`		Rulează după ce rândul a ieșit și s-a restrâns; eliminați aici elementul din date.
`onOpenChange`	`(side \| null) => void`		Rulează cu partea deschisă sau cu `null` când rândul se închide.
`disabled`	`boolean`	`false`	Dezactivează glisarea.
`contentClassName`	`string`		Clasă pentru conținutul rândului; `contentStyle` îi setează stilul inline.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

startActions apar când trageți spre capătul rândului, endActions când trageți spre început. Dați conținutului rândului un fundal cu contentClassName.

React Native folosește aceleași props și gesturi.

Folosită în aceste exemple

InboxFile de filtrare cu contoare live, rânduri care pot fi glisate deoparte și o listă care închide golul.MotionHighlightMotionListMotionSwipeMotionNumber