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 style सेट करते.

इतर props रेंडर होणाऱ्या एलिमेंटकडे जातात, त्यामुळे className, style आणि इव्हेंट हँडलर नेहमीप्रमाणे चालतात.

वेब आणि React Native

fillClassName किंवा fillStyle ने भरावाला शैली द्या; इतर props button कडे जातात.

React Native वर सुलभता activate क्रिया थेट निश्चित करते, कारण सहायक तंत्रज्ञानासह धरून ठेवणे अवघड असते.

या उदाहरणांमध्ये वापरलेले

चेकआउट सारांशकार्ट बदलताना प्रमाण, ओळींच्या रकमा आणि एकूण घरंगळतात; कूपन सूचना येते आणि जाते; पैसे देण्यासाठी जाणीवपूर्वक धरावे लागते.MotionListMotionNumberMotionPresenceMotionHold