MotionSwipe

Eine Zeile mit Aktionen per Wischen und optionalem Wegwischen.

WebReact NativeGesten

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

Kürzeste Nutzung

Row.jsx

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

Was sie dir abnimmt

Die Zeile folgt horizontalem Ziehen, bietet hinter ihren Aktionen Widerstand und kommt mit deinem Loslass-Tempo zur Ruhe.
Mit dismiss schiebt ein langes Wischen oder ein Wurf die Zeile hinaus, klappt ihre Höhe ein und ruft dann onDismiss(side) auf.
Vertikales Scrollen funktioniert weiter, und nur eine Zeile bleibt offen.
Ein Tipp auf eine offene Zeile schließt sie, und Tastaturfokus auf einer Aktion legt sie frei.

Gut für

Im Posteingang archivieren oder löschen.
Eine Unterhaltung anheften.
Ein Element aus einer Liste entfernen.

props

Prop	Typ	Standard	Beschreibung
`children`	`ReactNode`		Der Zeileninhalt.
`startActions`	`ReactNode`		Erscheinen am Zeilenanfang, wenn die Zeile zum Ende gezogen wird.
`endActions`	`ReactNode`		Erscheinen am Zeilenende, wenn die Zeile zum Anfang gezogen wird.
`dismiss`	`'start' \| 'end' \| 'both'`		Seiten, auf denen ein langes Wischen oder ein Wurf die Zeile entfernt.
`onDismiss`	`(side) => void`		Läuft, nachdem die Zeile hinausgeglitten und eingeklappt ist; entferne das Element hier aus deinen Daten.
`onOpenChange`	`(side \| null) => void`		Läuft mit der geöffneten Seite oder `null`, wenn die Zeile schließt.
`disabled`	`boolean`	`false`	Schaltet das Wischen aus.
`contentClassName`	`string`		Klasse für den Zeileninhalt; `contentStyle` setzt seinen Inline-Style.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

startActions erscheinen beim Ziehen zum Zeilenende, endActions beim Ziehen zum Zeilenanfang. Gib dem Zeileninhalt mit contentClassName einen Hintergrund.

React Native nutzt dieselben props und Gesten.

Verwendet in diesen Beispielen

PosteingangFilter-Tabs mit Live-Zählern, Zeilen zum Wegwischen und eine Liste, die die Lücke schließt.MotionHighlightMotionListMotionSwipeMotionNumber