MotionHold

Vahvista tuhoava toiminto painamalla pitkään; liian aikainen irrotus kelaa takaisin.

WebReact NativeEleet

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Danger.jsx

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

Mitä se hoitaa puolestasi

Täyttö kasvaa, kun osoitinta, Spacea tai Enteriä pidetään pohjassa.
Liian aikainen irrotus kelaa täytön takaisin, ja uusi painallus kelauksen aikana jatkaa nykyisestä täytöstä.
Painike painuu sisään pidettäessä ja ponnahtaa kerran vahvistettaessa.

Käytä sitä

Projektin poistaminen.
Maksa pitämällä pohjassa.
Asetusten nollaaminen.

Props

Prop	Tyyppi	Oletus	Kuvaus
`children`	`ReactNode`		Painikkeen nimike.
`onConfirm`	`() => void`		Suoritetaan, kun pitkä painallus on valmis.
`duration`	`number`	`1200`	Millisekunnit, joiden ajan painallusta on pidettävä.
`disabled`	`boolean`	`false`	Poistaa painikkeen käytöstä.
`fillClassName`	`string`		Luokka kasvavalle täytölle; `fillStyle` asettaa sen inline-tyylin.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

Muotoile täyttö fillClassName- tai fillStyle-arvolla; muut props-arvot menevät button-elementille.

React Nativessa saavutettavuuden aktivointitoiminto vahvistaa suoraan, koska pitkä painallus on vaikeaa apuvälineteknologialla.

Käytetty näissä esimerkeissä

Kassan yhteenvetoMäärät, rivisummat ja kokonaissumma pyörivät ostoskorin muuttuessa; kuponki-ilmoitus saapuu ja poistuu; maksaminen vaatii harkitun pitkän painalluksen.MotionListMotionNumberMotionPresenceMotionHold