MotionHold

Πατήστε παρατεταμένα για να επιβεβαιώσετε μια καταστροφική ενέργεια· η πρόωρη απελευθέρωση επιστρέφει πίσω.

WebReact NativeΧειρονομίες

Δοκιμάστε το

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Η πιο σύντομη χρήση

Danger.jsx

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

Τι αναλαμβάνει για εσάς

Το γέμισμα μεγαλώνει όσο κρατιέται πατημένος ο δείκτης, το Space ή το Enter.
Η πρόωρη απελευθέρωση γυρίζει πίσω το γέμισμα, και ένα νέο πάτημα κατά την επιστροφή συνεχίζει από το τρέχον γέμισμα.
Το κουμπί βυθίζεται όσο κρατιέται πατημένο και αναπηδά μία φορά όταν επιβεβαιωθεί.

Χρησιμοποιήστε το για

Διαγραφή έργου.
Κρατήστε πατημένο για πληρωμή.
Επαναφορά ρυθμίσεων.

Props

Prop	Τύπος	Προεπιλογή	Περιγραφή
`children`	`ReactNode`		Η ετικέτα του κουμπιού.
`onConfirm`	`() => void`		Εκτελείται μόλις ολοκληρωθεί το παρατεταμένο πάτημα.
`duration`	`number`	`1200`	Χιλιοστά του δευτερολέπτου που πρέπει να κρατηθεί το πάτημα.
`disabled`	`boolean`	`false`	Απενεργοποιεί το κουμπί.
`fillClassName`	`string`		Κλάση για το γέμισμα που μεγαλώνει· το `fillStyle` ορίζει το inline στυλ του.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Δώστε στυλ στο γέμισμα με fillClassName ή fillStyle· τα υπόλοιπα props πηγαίνουν στο button.

Στο React Native η ενέργεια ενεργοποίησης προσβασιμότητας επιβεβαιώνει απευθείας, επειδή το παρατεταμένο πάτημα είναι δύσκολο με υποστηρικτική τεχνολογία.

Χρησιμοποιείται σε αυτά τα παραδείγματα

Σύνοψη ολοκλήρωσης αγοράςΟι ποσότητες, τα σύνολα γραμμών και το συνολικό ποσό κυλούν καθώς αλλάζει το καλάθι· η ειδοποίηση κουπονιού μπαίνει και βγαίνει· η πληρωμή απαιτεί σκόπιμο παρατεταμένο πάτημα.MotionListMotionNumberMotionPresenceMotionHold