MotionSwipe

Kaydırınca eylem gösteren ve isteğe bağlı olarak kaydırarak atılabilen bir satır.

WebReact NativeHareketler

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

En kısa kullanım

Row.jsx

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

Sizin yerinize hallettikleri

Satır yatay sürüklemeleri izler, eylemlerinin ötesinde direnir ve bırakma hızınızla yerleşir.
dismiss ile uzun bir kaydırma ya da fırlatma satırı dışarı kaydırır, yüksekliğini daraltır ve ardından onDismiss(side) çağırır.
Dikey kaydırma çalışmaya devam eder ve yalnızca bir satır açık kalır.
Açık bir satıra dokunmak onu kapatır; bir eyleme klavye odağı gelmesi onu gösterir.

Şunlar için kullanın

Gelen kutusunda arşivleme ya da silme.
Bir sohbeti sabitleme.
Listeden bir öğe kaldırma.

Props

Prop	Tip	Varsayılan	Açıklama
`children`	`ReactNode`		Satır içeriği.
`startActions`	`ReactNode`		Satır sona doğru sürüklendiğinde satır başında gösterilir.
`endActions`	`ReactNode`		Satır başa doğru sürüklendiğinde satır sonunda gösterilir.
`dismiss`	`'start' \| 'end' \| 'both'`		Uzun bir kaydırmanın ya da fırlatmanın satırı kaldırdığı taraflar.
`onDismiss`	`(side) => void`		Satır dışarı kayıp daraldıktan sonra çalışır; öğeyi verinizden burada kaldırın.
`onOpenChange`	`(side \| null) => void`		Açık tarafla ya da satır kapanınca `null` ile çalışır.
`disabled`	`boolean`	`false`	Kaydırmayı kapatır.
`contentClassName`	`string`		Satır içeriği için class; `contentStyle` satır içi stilini ayarlar.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

startActions satır sonuna doğru sürüklerken, endActions başına doğru sürüklerken görünür. Satır içeriğine contentClassName ile bir arka plan verin.

React Native aynı props'u ve hareketleri kullanır.

Bu örneklerde kullanıldı

Gelen kutusuCanlı sayılı filtre sekmeleri, kaydırarak atılabilen satırlar ve boşluğu kapatan bir liste.MotionHighlightMotionListMotionSwipeMotionNumber