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 மூலம் நிரப்புக்கு style கொடுங்கள்; மற்ற props button-க்குச் செல்கின்றன.

React Native-இல் அணுகல்தன்மை activate செயல் நேரடியாக உறுதிப்படுத்துகிறது, ஏனெனில் உதவித் தொழில்நுட்பத்துடன் பிடித்து வைப்பது கடினம்.

இந்த எடுத்துக்காட்டுகளில் பயன்படுத்தப்பட்டது

செக்அவுட் சுருக்கம்கூடை மாறும்போது அளவுகள், வரி மொத்தங்கள், மொத்தம் உருள்கின்றன; கூப்பன் அறிவிப்பு நுழைந்து வெளியேறுகிறது; பணம் செலுத்த வேண்டுமென்றே பிடிக்க வேண்டும்.MotionListMotionNumberMotionPresenceMotionHold