MotionSwipe

En rad med handlinger som vises ved sveip og valgfri bortsveiping.

WebReact NativeBevegelser

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

Row.jsx

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

Dette tar den seg av

Raden følger vannrette drag, gjør motstand forbi handlingene og lander med slipphastigheten din.
Med dismiss skyver et langt sveip eller et kast raden ut, lukker høyden og kaller så onDismiss(side).
Loddrett rulling fungerer fortsatt, og bare én rad er åpen om gangen.
Et trykk på en åpen rad lukker den, og tastaturfokus på en handling viser den.

Bruk den til

Arkiver eller slett i en innboks.
Fest en samtale.
Fjern et element fra en liste.

Props

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Radens innhold.
`startActions`	`ReactNode`		Vises i begynnelsen av linjen når raden dras mot slutten.
`endActions`	`ReactNode`		Vises i slutten av linjen når raden dras mot begynnelsen.
`dismiss`	`'start' \| 'end' \| 'both'`		Sider der et langt sveip eller et kast fjerner raden.
`onDismiss`	`(side) => void`		Kjører etter at raden har glidd ut og lukket seg; fjern elementet fra dataene dine her.
`onOpenChange`	`(side \| null) => void`		Kjører med den åpne siden, eller `null` når raden lukkes.
`disabled`	`boolean`	`false`	Slår av sveiping.
`contentClassName`	`string`		Klasse for radinnholdet; `contentStyle` setter inline-stilen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

startActions vises når du drar mot slutten av linjen, endActions når du drar mot begynnelsen. Gi radinnholdet en bakgrunn med contentClassName.

React Native bruker de samme props og bevegelsene.

Brukt i disse eksemplene

InnboksFilterfaner med live-tall, rader som kan sveipes bort, og en liste som lukker hullet.MotionHighlightMotionListMotionSwipeMotionNumber