MotionSwipe

Vrstica z dejanji, ki se razkrijejo s potegom, in neobveznim zavrženjem s potegom.

SpletReact NativeGeste

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

Row.jsx

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

Kaj uredi namesto vas

Vrstica sledi vodoravnemu vlečenju, se upira za svojimi dejanji in se umiri s hitrostjo vašega spusta.
Z dismiss dolg poteg ali met vrstico odrine ven, strne njeno višino in nato pokliče onDismiss(side).
Navpično drsenje deluje naprej in odprta ostane le ena vrstica.
Dotik odprte vrstice jo zapre, fokus tipkovnice na dejanju pa ga razkrije.

Uporabite jo za

Arhiviranje ali brisanje v nabiralniku.
Pripenjanje pogovora.
Odstranitev elementa s seznama.

Props

Prop	Tip	Privzeto	Opis
`children`	`ReactNode`		Vsebina vrstice.
`startActions`	`ReactNode`		Razkrijejo se na začetku vrstice, ko vrstico vlečete proti koncu.
`endActions`	`ReactNode`		Razkrijejo se na koncu vrstice, ko vrstico vlečete proti začetku.
`dismiss`	`'start' \| 'end' \| 'both'`		Strani, na katerih dolg poteg ali met odstrani vrstico.
`onDismiss`	`(side) => void`		Se izvede, ko vrstica zdrsne ven in se strne; tukaj element odstranite iz svojih podatkov.
`onOpenChange`	`(side \| null) => void`		Se izvede z odprto stranjo ali z `null`, ko se vrstica zapre.
`disabled`	`boolean`	`false`	Izklopi potezanje.
`contentClassName`	`string`		Razred za vsebino vrstice; `contentStyle` nastavi njen vrstični slog.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

startActions se pojavijo pri vlečenju proti koncu vrstice, endActions pa pri vlečenju proti začetku. Vsebini vrstice dajte ozadje s contentClassName.

React Native uporablja iste props in geste.

Uporabljeno v teh primerih

NabiralnikZavihki filtrov s števci v živo, vrstice, ki jih lahko odrinete s potegom, in seznam, ki zapre vrzel.MotionHighlightMotionListMotionSwipeMotionNumber