MotionHold

ধ্বংসাত্মক কাজ নিশ্চিত করতে চেপে ধরুন; আগে ছেড়ে দিলে পিছিয়ে যায়।

ওয়েবReact Nativeজেসচার

চালিয়ে দেখুন

উদাহরণ প্রস্তুত হচ্ছে…

JavaScript বন্ধ আছে। নিচের কোডই পুরো উদাহরণ।

App.jsx

import { useState } from 'react';
import { MotionHold, MotionSwap } from '@kkwaenggwari/animated-chorus';
import './styles.css';

export default function App({ duration = 1200 }) {
  const [deleted, setDeleted] = useState(false);

  return (
    <div className="stage">
      <div className="project">
        <MotionSwap value={deleted ? 'deleted' : 'live'} effect="up">
          {deleted ? 'Project deleted' : 'Project: Aurora'}
        </MotionSwap>
      </div>
      {deleted ? (
        <button className="restore" onClick={() => setDeleted(false)}>
          Restore project
        </button>
      ) : (
        <MotionHold
          className="hold"
          fillClassName="fill"
          duration={duration}
          onConfirm={() => setDeleted(true)}
        >
          Hold to delete
        </MotionHold>
      )}
      <p className="hint">Release early and the fill rewinds. Space and Enter work too.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 44px 20px;
}

.project {
  font:
    750 24px system-ui,
    sans-serif;
  color: #0e2e24;
}

.hold {
  position: relative;
  min-height: 52px;
  padding: 0 28px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid #0e2e24;
  border-radius: 999px;
  background: #fff;
  font:
    700 16px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #43c58f;
}

.restore {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

সবচেয়ে ছোট ব্যবহার

Danger.jsx

<MotionHold duration={1200} onConfirm={deleteProject}>
  Hold to delete
</MotionHold>;

এটি আপনার হয়ে যা সামলায়

পয়েন্টার, Space বা Enter চেপে থাকলে ভরাট বাড়ে।
আগে ছেড়ে দিলে ভরাট পিছিয়ে যায়, আর পিছানোর মাঝে আবার চাপলে বর্তমান ভরাট থেকে এগোয়।
চেপে ধরলে বোতাম দেবে যায় আর নিশ্চিত হলে একবার লাফিয়ে ওঠে।

যেখানে ব্যবহার করবেন

প্রজেক্ট মুছুন।
পেমেন্টের জন্য চেপে ধরুন।
সেটিংস রিসেট করুন।

Props

Prop	টাইপ	ডিফল্ট	বিবরণ
`children`	`ReactNode`		বোতামের লেবেল।
`onConfirm`	`() => void`		চেপে ধরা সম্পূর্ণ হলে চলে।
`duration`	`number`	`1200`	কত মিলিসেকেন্ড চেপে ধরতে হবে।
`disabled`	`boolean`	`false`	বোতাম বন্ধ করে।
`fillClassName`	`string`		বাড়তে থাকা ভরাটের class; `fillStyle` তার inline স্টাইল ঠিক করে।

অন্য props রেন্ডার হওয়া এলিমেন্টে যায়, তাই className, style আর ইভেন্ট হ্যান্ডলার স্বাভাবিকভাবে কাজ করে।

ওয়েব আর React Native

ভরাট fillClassName বা fillStyle দিয়ে স্টাইল করুন; অন্য props button-এ যায়।

React Native-এ অ্যাক্সেসিবিলিটির activate অ্যাকশন সরাসরি নিশ্চিত করে, কারণ সহায়ক প্রযুক্তিতে চেপে ধরা কঠিন।

এই উদাহরণগুলোতে ব্যবহৃত

চেকআউট সারাংশকার্ট বদলালে পরিমাণ, সারির মোট আর সর্বমোট ঘোরে; কুপনের বিজ্ঞপ্তি আসে আর যায়; পেমেন্টে ভেবেচিন্তে চেপে ধরতে হয়।MotionListMotionNumberMotionPresenceMotionHold