MotionHold

Nhấn giữ để xác nhận thao tác không thể hoàn tác; thả sớm sẽ tua ngược.

WebReact NativeCử chỉ

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Cách dùng ngắn nhất

Danger.jsx

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

Những gì nó xử lý giúp bạn

Phần tô tăng dần khi con trỏ, Space hoặc Enter được giữ.
Thả sớm sẽ tua ngược phần tô, và nhấn lại giữa lúc tua ngược sẽ tiếp tục từ mức tô hiện tại.
Nút lún xuống khi được giữ và bật lên một lần khi xác nhận.

Dùng cho

Xóa một dự án.
Giữ để thanh toán.
Đặt lại cài đặt.

Props

Prop	Kiểu	Mặc định	Mô tả
`children`	`ReactNode`		Nhãn của nút.
`onConfirm`	`() => void`		Chạy khi việc nhấn giữ hoàn tất.
`duration`	`number`	`1200`	Số mili giây cần giữ.
`disabled`	`boolean`	`false`	Tắt nút.
`fillClassName`	`string`		Class cho phần tô đang tăng; `fillStyle` đặt style nội tuyến của nó.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

Tạo kiểu phần tô bằng fillClassName hoặc fillStyle; các props khác chuyển tới button.

Trên React Native, thao tác trợ năng activate xác nhận ngay, vì nhấn giữ rất khó với công nghệ hỗ trợ.

Được dùng trong các ví dụ này

Tóm tắt thanh toánSố lượng, tổng từng dòng và tổng tiền cuộn khi giỏ hàng thay đổi; thông báo mã giảm giá đi vào và rời đi; thanh toán đòi hỏi nhấn giữ có chủ đích.MotionListMotionNumberMotionPresenceMotionHold