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

ما يتولّاه عنك

يكبر التعبئة ما دام المؤشر أو مفتاح المسافة أو Enter مضغوطًا.
الإفلات المبكر يعيد التعبئة إلى الوراء، والضغط مجددًا أثناء الرجوع يكمل من التعبئة الحالية.
ينضغط الزر أثناء الضغط ويقفز مرة واحدة عند التأكيد.

استخدمه لـ

حذف مشروع.
اضغط مطوّلًا للدفع.
إعادة ضبط الإعدادات.

Props

Prop	النوع	الافتراضي	الوصف
`children`	`ReactNode`		تسمية الزر.
`onConfirm`	`() => void`		يعمل بعد اكتمال الضغط المطوّل.
`duration`	`number`	`1200`	مللي ثوانٍ يجب أن يستمر فيها الضغط.
`disabled`	`boolean`	`false`	يعطّل الزر.
`fillClassName`	`string`		صنف التعبئة المتنامية؛ ويضبط `fillStyle` نمطها المضمّن.

تذهب props الأخرى إلى العنصر المعروض، فتعمل className وstyle ومعالجات الأحداث كالمعتاد.

الويب وReact Native

نسّق التعبئة عبر fillClassName أو fillStyle؛ وتذهب props الأخرى إلى button.

في React Native يؤكّد إجراء التفعيل في سهولة الوصول مباشرة، لأن الضغط المطوّل صعب مع التقنيات المساعدة.

مستخدم في هذه الأمثلة

ملخص الدفعتتدحرج الكميات ومجاميع الأسطر والإجمالي مع تغيّر السلة؛ ويدخل إشعار القسيمة ويخرج؛ والدفع يتطلب ضغطًا مطوّلًا مقصودًا.MotionListMotionNumberMotionPresenceMotionHold