MotionSwipe

Μια γραμμή με ενέργειες που αποκαλύπτονται με σάρωση και προαιρετική απόρριψη με σάρωση.

WebReact NativeΧειρονομίες

Δοκιμάστε το

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Η πιο σύντομη χρήση

Row.jsx

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

Τι αναλαμβάνει για εσάς

Η γραμμή ακολουθεί τις οριζόντιες συρσίματα, αντιστέκεται πέρα από τις ενέργειές της και σταθεροποιείται με την ταχύτητα απελευθέρωσης.
Με dismiss, μια μεγάλη σάρωση ή μια ρίψη βγάζει τη γραμμή έξω, συμπτύσσει το ύψος της και μετά καλεί το onDismiss(side).
Η κάθετη κύλιση συνεχίζει να λειτουργεί και μένει ανοιχτή μόνο μία γραμμή.
Ένα πάτημα σε ανοιχτή γραμμή την κλείνει, και η εστίαση πληκτρολογίου σε μια ενέργεια την αποκαλύπτει.

Χρησιμοποιήστε το για

Αρχειοθέτηση ή διαγραφή στα εισερχόμενα.
Καρφίτσωμα συνομιλίας.
Αφαίρεση στοιχείου από λίστα.

Props

Prop	Τύπος	Προεπιλογή	Περιγραφή
`children`	`ReactNode`		Το περιεχόμενο της γραμμής.
`startActions`	`ReactNode`		Αποκαλύπτονται στην αρχή της γραμμής όταν η γραμμή σύρεται προς το τέλος.
`endActions`	`ReactNode`		Αποκαλύπτονται στο τέλος της γραμμής όταν η γραμμή σύρεται προς την αρχή.
`dismiss`	`'start' \| 'end' \| 'both'`		Πλευρές όπου μια μεγάλη σάρωση ή ρίψη αφαιρεί τη γραμμή.
`onDismiss`	`(side) => void`		Εκτελείται αφού η γραμμή γλιστρήσει έξω και συμπτυχθεί· αφαιρέστε εδώ το στοιχείο από τα δεδομένα σας.
`onOpenChange`	`(side \| null) => void`		Εκτελείται με την ανοιχτή πλευρά, ή με `null` όταν κλείνει η γραμμή.
`disabled`	`boolean`	`false`	Απενεργοποιεί τη σάρωση.
`contentClassName`	`string`		Κλάση για το περιεχόμενο της γραμμής· το `contentStyle` ορίζει το inline στυλ του.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Τα startActions εμφανίζονται όταν σύρετε προς το τέλος της γραμμής, τα endActions όταν σύρετε προς την αρχή. Δώστε φόντο στο περιεχόμενο της γραμμής με contentClassName.

Το React Native χρησιμοποιεί τα ίδια props και τις ίδιες χειρονομίες.

Χρησιμοποιείται σε αυτά τα παραδείγματα

ΕισερχόμεναΚαρτέλες φίλτρων με ζωντανούς μετρητές, γραμμές που απομακρύνονται με σάρωση και μια λίστα που κλείνει το κενό.MotionHighlightMotionListMotionSwipeMotionNumber