MotionSwipe

ಸ್ವೈಪ್ ಮಾಡಿ ಕ್ರಿಯೆಗಳನ್ನು ತೋರಿಸುವ, ಐಚ್ಛಿಕವಾಗಿ ಸ್ವೈಪ್ ಮಾಡಿ ತೆಗೆಯಬಹುದಾದ ಸಾಲು.

ವೆಬ್React Nativeಸನ್ನೆಗಳು

ಪ್ರಯತ್ನಿಸಿ

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

JavaScript ಆಫ್ ಆಗಿದೆ. ಕೆಳಗಿನ ಕೋಡ್ ಪೂರ್ಣ ಉದಾಹರಣೆ.

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

ಅತಿ ಚಿಕ್ಕ ಬಳಕೆ

Row.jsx

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

ಇದು ನಿಮಗಾಗಿ ನಿರ್ವಹಿಸುವುದು

ಸಾಲು ಅಡ್ಡ ಎಳೆಯುವಿಕೆಗಳನ್ನು ಹಿಂಬಾಲಿಸುತ್ತದೆ, ಕ್ರಿಯೆಗಳಾಚೆ ಪ್ರತಿರೋಧಿಸುತ್ತದೆ ಮತ್ತು ನೀವು ಬಿಡುವ ವೇಗದೊಂದಿಗೆ ನೆಲೆಗೊಳ್ಳುತ್ತದೆ.
dismiss ನೊಂದಿಗೆ, ಉದ್ದ ಸ್ವೈಪ್ ಅಥವಾ ಎಸೆತ ಸಾಲನ್ನು ಹೊರಗೆ ಜಾರಿಸಿ, ಅದರ ಎತ್ತರ ಮಡಚಿ, ನಂತರ onDismiss(side) ಕಾಲ್ ಮಾಡುತ್ತದೆ.
ಲಂಬ ಸ್ಕ್ರೋಲ್ ಕೆಲಸ ಮುಂದುವರಿಸುತ್ತದೆ, ಮತ್ತು ಒಂದೇ ಸಾಲು ತೆರೆದಿರುತ್ತದೆ.
ತೆರೆದ ಸಾಲಿನ ಮೇಲೆ ಟ್ಯಾಪ್ ಅದನ್ನು ಮುಚ್ಚುತ್ತದೆ, ಮತ್ತು ಕ್ರಿಯೆಯ ಮೇಲೆ ಕೀಬೋರ್ಡ್ ಫೋಕಸ್ ಬಂದರೆ ಅದು ತೆರೆದುಕೊಳ್ಳುತ್ತದೆ.

ಇದಕ್ಕೆ ಬಳಸಿ

ಇನ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಆರ್ಕೈವ್ ಅಥವಾ ಅಳಿಸಿ.
ಸಂಭಾಷಣೆಯನ್ನು ಪಿನ್ ಮಾಡಿ.
ಪಟ್ಟಿಯಿಂದ ವಸ್ತು ತೆಗೆಯಿರಿ.

Props

Prop	ಟೈಪ್	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`children`	`ReactNode`		ಸಾಲಿನ ವಿಷಯ.
`startActions`	`ReactNode`		ಸಾಲನ್ನು ಅಂತ್ಯದ ಕಡೆ ಎಳೆದಾಗ ಇನ್‌ಲೈನ್ ಆರಂಭದಲ್ಲಿ ತೆರೆದುಕೊಳ್ಳುತ್ತದೆ.
`endActions`	`ReactNode`		ಸಾಲನ್ನು ಆರಂಭದ ಕಡೆ ಎಳೆದಾಗ ಇನ್‌ಲೈನ್ ಅಂತ್ಯದಲ್ಲಿ ತೆರೆದುಕೊಳ್ಳುತ್ತದೆ.
`dismiss`	`'start' \| 'end' \| 'both'`		ಉದ್ದ ಸ್ವೈಪ್ ಅಥವಾ ಎಸೆತ ಸಾಲನ್ನು ತೆಗೆಯುವ ಬದಿಗಳು.
`onDismiss`	`(side) => void`		ಸಾಲು ಹೊರಗೆ ಜಾರಿ ಮಡಚಿದ ನಂತರ ನಡೆಯುತ್ತದೆ; ಇಲ್ಲಿ ನಿಮ್ಮ ಡೇಟಾದಿಂದ ವಸ್ತು ತೆಗೆಯಿರಿ.
`onOpenChange`	`(side \| null) => void`		ತೆರೆದ ಬದಿಯೊಂದಿಗೆ, ಅಥವಾ ಸಾಲು ಮುಚ್ಚಿದಾಗ `null` ನೊಂದಿಗೆ ನಡೆಯುತ್ತದೆ.
`disabled`	`boolean`	`false`	ಸ್ವೈಪ್ ಆಫ್ ಮಾಡುತ್ತದೆ.
`contentClassName`	`string`		ಸಾಲಿನ ವಿಷಯಕ್ಕೆ class; `contentStyle` ಅದರ inline style ಹೊಂದಿಸುತ್ತದೆ.
`transition`	`Transition`	`spring`	ಟೈಮಿಂಗ್ ವಕ್ರ `{ duration, easing }` ಅಥವಾ spring `{ tempo: 'spring', spring }`. spring ಗಳು ಅಡ್ಡಿಯಾದಾಗ ತಮ್ಮ ಆವೇಗ ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ.

ಇತರ props ರೆಂಡರ್ ಆಗುವ ಎಲಿಮೆಂಟ್‌ಗೆ ಹೋಗುತ್ತವೆ, ಹೀಗಾಗಿ className, style ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಎಂದಿನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ವೆಬ್ ಮತ್ತು React Native

ಇನ್‌ಲೈನ್ ಅಂತ್ಯದ ಕಡೆ ಎಳೆದಾಗ startActions ಕಾಣುತ್ತವೆ, ಆರಂಭದ ಕಡೆ ಎಳೆದಾಗ endActions. contentClassName ನಿಂದ ಸಾಲಿನ ವಿಷಯಕ್ಕೆ ಹಿನ್ನೆಲೆ ಕೊಡಿ.

React Native ಅದೇ props ಮತ್ತು ಸನ್ನೆಗಳನ್ನು ಬಳಸುತ್ತದೆ.

ಈ ಉದಾಹರಣೆಗಳಲ್ಲಿ ಬಳಸಲಾಗಿದೆ

ಇನ್‌ಬಾಕ್ಸ್ನೇರ ಎಣಿಕೆಗಳಿರುವ ಫಿಲ್ಟರ್ ಟ್ಯಾಬ್‌ಗಳು, ಸ್ವೈಪ್ ಮಾಡಿ ತೆಗೆಯಬಹುದಾದ ಸಾಲುಗಳು ಮತ್ತು ಖಾಲಿ ಜಾಗ ಮುಚ್ಚುವ ಪಟ್ಟಿ.MotionHighlightMotionListMotionSwipeMotionNumber