MotionHold

กดค้างเพื่อยืนยันการกระทำที่ย้อนกลับไม่ได้ ปล่อยก่อนจะถอยกลับ

เว็บReact 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 และตัวจัดการเหตุการณ์จึงทำงานตามปกติ

เว็บและ React Native

ปรับสไตล์แถบเติมด้วย fillClassName หรือ fillStyle props อื่นส่งต่อไปยัง button

บน React Native การกระทำ activate เพื่อการเข้าถึงจะยืนยันทันที เพราะการกดค้างทำได้ยากกับเทคโนโลยีช่วยเหลือ

ใช้ในตัวอย่างเหล่านี้

สรุปการชำระเงินจำนวน ยอดต่อรายการ และยอดรวมหมุนเมื่อตะกร้าเปลี่ยน ประกาศคูปองเข้าและออก การชำระเงินต้องกดค้างอย่างตั้งใจMotionListMotionNumberMotionPresenceMotionHold