MotionSwipe

En række med handlinger, der vises ved swipe, og valgfri bortswipning.

WebReact NativeGestus

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 brug

Row.jsx

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

Det klarer den for dig

Rækken følger vandrette træk, yder modstand forbi sine handlinger og lander med din slip-hastighed.
Med dismiss skubber et langt swipe eller et kast rækken ud, folder dens højde sammen og kalder derefter onDismiss(side).
Lodret scroll virker stadig, og kun én række er åben ad gangen.
Et tryk på en åben række lukker den, og tastaturfokus på en handling viser den.

Brug den til

Arkivér eller slet i en indbakke.
Fastgør en samtale.
Fjern et element fra en liste.

Props

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Rækkens indhold.
`startActions`	`ReactNode`		Vises i linjens begyndelse, når rækken trækkes mod slutningen.
`endActions`	`ReactNode`		Vises i linjens slutning, når rækken trækkes mod begyndelsen.
`dismiss`	`'start' \| 'end' \| 'both'`		Sider, hvor et langt swipe eller et kast fjerner rækken.
`onDismiss`	`(side) => void`		Kører, efter at rækken er gledet ud og foldet sammen; fjern elementet fra dine data her.
`onOpenChange`	`(side \| null) => void`		Kører med den åbne side eller `null`, når rækken lukker.
`disabled`	`boolean`	`false`	Slår swipe fra.
`contentClassName`	`string`		Klasse til rækkens indhold; `contentStyle` sætter dets inline-style.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

startActions vises, når du trækker mod linjens slutning, endActions, når du trækker mod begyndelsen. Giv rækkens indhold en baggrund med contentClassName.

React Native bruger de samme props og gestus.

Brugt i disse eksempler

IndbakkeFilterfaner med live-tal, rækker, der kan swipes væk, og en liste, der lukker hullet.MotionHighlightMotionListMotionSwipeMotionNumber