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