MotionHold

Tryk og hold for at bekræfte en destruktiv handling; slipper du tidligt, spoles tilbage.

WebReact NativeGestus

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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

Korteste brug

Danger.jsx

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

Det klarer den for dig

Fyldet vokser, mens markøren, mellemrum eller Enter holdes nede.
At slippe tidligt spoler fyldet tilbage, og at trykke igen midt i tilbagespolingen fortsætter fra det aktuelle fyld.
Knappen trykkes ind, mens den holdes, og hopper én gang ved bekræftelse.

Brug den til

Slet et projekt.
Hold for at betale.
Nulstil indstillinger.

Props

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Knappens etiket.
`onConfirm`	`() => void`		Kører, når holdet er fuldført.
`duration`	`number`	`1200`	Millisekunder, trykket skal holdes.
`disabled`	`boolean`	`false`	Slår knappen fra.
`fillClassName`	`string`		Klasse til det voksende fyld; `fillStyle` sætter dets inline-style.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

Style fyldet med fillClassName eller fillStyle; andre props går til button.

I React Native bekræfter tilgængelighedshandlingen aktivér med det samme, fordi det er svært at holde nede med hjælpemidler.

Brugt i disse eksempler

KasseoversigtAntal, linjetotaler og totalen ruller, når kurven ændrer sig; rabatbeskeden kommer og går; at betale kræver et bevidst tryk og hold.MotionListMotionNumberMotionPresenceMotionHold