MotionHold

Håll ned för att bekräfta en destruktiv åtgärd; att släppa tidigt spolar tillbaka.

WebbReact NativeGester

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Danger.jsx

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

Det här sköter den åt dig

Fyllningen växer medan pekaren, mellanslag eller Enter hålls ned.
Att släppa tidigt spolar tillbaka fyllningen, och att trycka igen mitt i tillbakaspolningen fortsätter från den aktuella fyllningen.
Knappen trycks in medan den hålls och studsar en gång vid bekräftelse.

Använd den för

Radera ett projekt.
Håll ned för att betala.
Återställ inställningar.

Props

Prop	Typ	Standard	Beskrivning
`children`	`ReactNode`		Knappens etikett.
`onConfirm`	`() => void`		Körs när nedhållningen är fullbordad.
`duration`	`number`	`1200`	Millisekunder som trycket måste hållas.
`disabled`	`boolean`	`false`	Stänger av knappen.
`fillClassName`	`string`		Klass för den växande fyllningen; `fillStyle` sätter dess inline-style.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

Styla fyllningen med fillClassName eller fillStyle; andra props går till button.

I React Native bekräftar tillgänglighetsåtgärden aktivera direkt, eftersom det är svårt att hålla ned med hjälpmedel.

Används i de här exemplen

KassasammanfattningAntal, radsummor och totalen rullar när varukorgen ändras; rabattmeddelandet kommer och går; att betala kräver ett avsiktligt nedhållet tryck.MotionListMotionNumberMotionPresenceMotionHold