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