MotionSwipe

Eilutė su braukiant atskleidžiamais veiksmais ir neprivalomu atmetimu braukiant.

ŽiniatinklisReact NativeGestai

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Row.jsx

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

Ką jis sutvarko už jus

Eilutė seka horizontalų vilkimą, priešinasi už savo veiksmų ir nusistovi pagal jūsų paleidimo greitį.
Su dismiss ilgas braukimas ar metimas išstumia eilutę, sutraukia jos aukštį ir tada iškviečia onDismiss(side).
Vertikalus slinkimas toliau veikia, o atidaryta lieka tik viena eilutė.
Bakstelėjimas į atidarytą eilutę ją uždaro, o klaviatūros fokusas ant veiksmo jį atskleidžia.

Naudokite jį

Archyvavimas ar ištrynimas pašto dėžutėje.
Pokalbio prisegimas.
Elemento pašalinimas iš sąrašo.

Props

Prop	Tipas	Numatytoji	Aprašymas
`children`	`ReactNode`		Eilutės turinys.
`startActions`	`ReactNode`		Atskleidžiami eilutės pradžioje, kai eilutė velkama link galo.
`endActions`	`ReactNode`		Atskleidžiami eilutės gale, kai eilutė velkama link pradžios.
`dismiss`	`'start' \| 'end' \| 'both'`		Pusės, kuriose ilgas braukimas ar metimas pašalina eilutę.
`onDismiss`	`(side) => void`		Vykdomas eilutei išslinkus ir susitraukus; čia pašalinkite elementą iš savo duomenų.
`onOpenChange`	`(side \| null) => void`		Vykdomas su atidaryta puse arba `null`, kai eilutė užsidaro.
`disabled`	`boolean`	`false`	Išjungia braukimą.
`contentClassName`	`string`		Eilutės turinio klasė; `contentStyle` nustato jo vidinį stilių.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

startActions pasirodo velkant link eilutės galo, endActions – velkant link pradžios. Eilutės turiniui fono suteikite su contentClassName.

React Native naudoja tuos pačius props ir gestus.

Naudojama šiuose pavyzdžiuose

Pašto dėžutėFiltrų skirtukai su gyvais skaičiais, braukiamos eilutės ir sąrašas, uždarantis tarpą.MotionHighlightMotionListMotionSwipeMotionNumber