MotionHold

Apăsați lung pentru a confirma o acțiune distructivă; o eliberare prea devreme derulează înapoi.

WebReact NativeGesturi

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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;
}

Cea mai scurtă utilizare

Danger.jsx

<MotionHold duration={1200} onConfirm={deleteProject}>
  Hold to delete
</MotionHold>;

Ce rezolvă în locul dumneavoastră

Umplerea crește cât sunt apăsate cursorul, Space sau Enter.
O eliberare prea devreme derulează umplerea înapoi, iar o nouă apăsare în timpul derulării continuă de la umplerea curentă.
Butonul se adâncește cât e apăsat și sare o dată la confirmare.

Folosiți-o pentru

Ștergerea unui proiect.
Apăsați lung pentru a plăti.
Resetarea setărilor.

Props

Prop	Tip	Implicit	Descriere
`children`	`ReactNode`		Eticheta butonului.
`onConfirm`	`() => void`		Rulează după ce apăsarea lungă se încheie.
`duration`	`number`	`1200`	Milisecundele cât trebuie ținută apăsarea.
`disabled`	`boolean`	`false`	Dezactivează butonul.
`fillClassName`	`string`		Clasă pentru umplerea care crește; `fillStyle` îi setează stilul inline.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

Stilizați umplerea cu fillClassName sau fillStyle; celelalte props merg la button.

În React Native, acțiunea de activare a accesibilității confirmă direct, pentru că apăsarea lungă e dificilă cu tehnologiile asistive.

Folosită în aceste exemple

Rezumatul comenziiCantitățile, totalurile pe rând și totalul se rotesc când se schimbă coșul; notificarea de cupon intră și pleacă; plata cere o apăsare lungă deliberată.MotionListMotionNumberMotionPresenceMotionHold