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)-ஐ அழைக்கிறது.
செங்குத்து உருட்டல் தொடர்ந்து இயங்குகிறது; ஒரே ஒரு வரிசை மட்டுமே திறந்திருக்கும்.
திறந்த வரிசையைத் தட்டினால் அது மூடுகிறது; செயலில் விசைப்பலகை focus வந்தால் அது வெளிப்படுகிறது.

இதற்குப் பயன்படுத்துங்கள்

Inbox-இல் காப்பகப்படுத்து அல்லது நீக்கு.
உரையாடலைப் பின் செய்.
பட்டியலிலிருந்து உருப்படியை அகற்று.

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-ஐயும் சைகைகளையும் பயன்படுத்துகிறது.

இந்த எடுத்துக்காட்டுகளில் பயன்படுத்தப்பட்டது

Inboxநேரடி எண்ணிக்கைகளுடன் வடிகட்டித் தாவல்கள், ஸ்வைப் செய்து நீக்கக்கூடிய வரிசைகள், இடைவெளியை மூடும் பட்டியல்.MotionHighlightMotionListMotionSwipeMotionNumber