MotionHold

Paspauskite ir palaikykite, kad patvirtintumėte negrįžtamą veiksmą; per anksti paleidus atsukama atgal.

ŽiniatinklisReact NativeGestai

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Danger.jsx

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

Ką jis sutvarko už jus

Užpildas auga, kol laikomas žymeklis, Space ar Enter.
Per anksti paleidus užpildas atsukamas atgal, o paspaudus dar kartą atsukimo metu tęsiama nuo dabartinio užpildo.
Mygtukas laikant įsispaudžia ir patvirtinus vieną kartą atšoka.

Naudokite jį

Projekto ištrynimas.
Palaikykite, kad sumokėtumėte.
Nustatymų atstatymas.

Props

Prop	Tipas	Numatytoji	Aprašymas
`children`	`ReactNode`		Mygtuko etiketė.
`onConfirm`	`() => void`		Vykdomas, kai palaikymas baigtas.
`duration`	`number`	`1200`	Kiek milisekundžių reikia laikyti paspaudus.
`disabled`	`boolean`	`false`	Išjungia mygtuką.
`fillClassName`	`string`		Augančio užpildo klasė; `fillStyle` nustato jo vidinį stilių.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

Užpildo stilių nustatykite su fillClassName arba fillStyle; kiti props perduodami button.

React Native prieinamumo aktyvinimo veiksmas patvirtina tiesiogiai, nes laikyti paspaudus su pagalbinėmis technologijomis sunku.

Naudojama šiuose pavyzdžiuose

Atsiskaitymo suvestinėKiekiai, eilučių sumos ir bendra suma sukasi keičiantis krepšeliui; kupono pranešimas įeina ir išeina; mokėjimui reikia sąmoningo palaikymo.MotionListMotionNumberMotionPresenceMotionHold