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