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`		class למילוי שגדל; `fillStyle` מגדיר את הסגנון המוטבע שלו.

props אחרים עוברים לאלמנט המרונדר, כך ש־className, style ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

עצבו את המילוי עם fillClassName או fillStyle; props אחרים עוברים ל־button.

ב־React Native פעולת ההפעלה של הנגישות מאשרת ישירות, כי קשה להחזיק עם טכנולוגיה מסייעת.

בשימוש בדוגמאות האלה

סיכום תשלוםכמויות, סכומי שורות והסכום הכולל מתגלגלים כשהעגלה משתנה; הודעת הקופון נכנסת ויוצאת; תשלום דורש החזקה מכוונת.MotionListMotionNumberMotionPresenceMotionHold