MotionHold

Pritisnite in držite, da potrdite uničujoče dejanje; zgodnji spust previje nazaj.

SpletReact NativeGeste

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

Danger.jsx

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

Kaj uredi namesto vas

Zapolnitev raste, medtem ko držite kazalec, Space ali Enter.
Zgodnji spust previje zapolnitev nazaj, ponoven pritisk med previjanjem pa nadaljuje od trenutne zapolnitve.
Gumb se med držanjem pogrezne in ob potrditvi enkrat poskoči.

Uporabite jo za

Brisanje projekta.
Držite za plačilo.
Ponastavitev nastavitev.

Props

Prop	Tip	Privzeto	Opis
`children`	`ReactNode`		Oznaka gumba.
`onConfirm`	`() => void`		Se izvede, ko se držanje zaključi.
`duration`	`number`	`1200`	Milisekunde, kolikor dolgo je treba držati pritisk.
`disabled`	`boolean`	`false`	Izklopi gumb.
`fillClassName`	`string`		Razred za rastočo zapolnitev; `fillStyle` nastavi njen vrstični slog.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

Zapolnitev oblikujte s fillClassName ali fillStyle; druge props gredo button.

V React Nativu dejanje aktivacije dostopnosti potrdi neposredno, ker je držanje s pomožno tehnologijo težavno.

Uporabljeno v teh primerih

Povzetek blagajneKoličine, zneski vrstic in skupni znesek se vrtijo, ko se košarica spreminja; obvestilo o kuponu vstopi in odide; plačilo zahteva premišljeno držanje.MotionListMotionNumberMotionPresenceMotionHold