MotionHold

Yıkıcı bir eylemi onaylamak için basılı tutun; erken bırakmak geri sarar.

WebReact NativeHareketler

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

En kısa kullanım

Danger.jsx

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

Sizin yerinize hallettikleri

İşaretçi, Space ya da Enter basılı tutulurken dolgu büyür.
Erken bırakmak dolguyu geri sarar; geri sarma sırasında yeniden basmak mevcut dolgudan devam eder.
Düğme basılıyken içeri çöker ve onaylanınca bir kez sıçrar.

Şunlar için kullanın

Bir projeyi silme.
Ödemek için basılı tutun.
Ayarları sıfırlama.

Props

Prop	Tip	Varsayılan	Açıklama
`children`	`ReactNode`		Düğme etiketi.
`onConfirm`	`() => void`		Basılı tutma tamamlanınca çalışır.
`duration`	`number`	`1200`	Basmanın tutulması gereken milisaniye.
`disabled`	`boolean`	`false`	Düğmeyi kapatır.
`fillClassName`	`string`		Büyüyen dolgu için class; `fillStyle` satır içi stilini ayarlar.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

Dolguyu fillClassName ya da fillStyle ile biçimlendirin; diğer props button'a gider.

React Native'de erişilebilirlik etkinleştirme eylemi doğrudan onaylar, çünkü yardımcı teknolojiyle basılı tutmak zordur.

Bu örneklerde kullanıldı

Ödeme özetiSepet değiştikçe adetler, satır toplamları ve genel toplam döner; kupon bildirimi girip çıkar; ödeme bilinçli bir basılı tutma gerektirir.MotionListMotionNumberMotionPresenceMotionHold