64 icon · interaction="click-replay"

Icon động khi click

Những icon này phát lại từ đầu sau mỗi lần được click, như một lời xác nhận nhỏ rằng thao tác đã thành công. Chúng hợp với các thao tác một lần, không để lại trạng thái: gửi, lưu, làm mới, tải xuống, in hoặc xóa.

Cách hoạt động

Phát lại một lần từ đầu sau mỗi lần click, trừ khi người dùng bật giảm chuyển động.

Khi người dùng bật giảm chuyển động, cú click vẫn đến được handler của bạn nhưng hiệu ứng không phát. React component lo hết những việc này; bạn chỉ cần chọn icon.

Dùng ở đâu

Nút gửi trong form chat và bình luận
Nút lưu, tải xuống và tải lên
Nút làm mới và xoay
Nút thêm vào giỏ
Nút định dạng văn bản trong trình soạn thảo

Theo danh mục

Cảnh báo · 1
X Octagon
Điều hướng · 6
Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out
Thao tác · 30
Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square
Nội dung · 5
File Minus, File Plus, Folder Minus, Folder Plus, User Check
Đa phương tiện · 6
Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle
Soạn thảo văn bản · 8
Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline
Liên lạc · 3
Phone, Phone Call, Send
Thiết bị · 1
Printer
Thương mại · 1
Shopping Cart
Thiết kế & bố cục · 3
Crop, Mouse Pointer, Scissors

Dùng trong React

Các icon liệt kê ở đây mặc định chạy tương tác này. Icon khác cũng dùng được: chỉ cần truyền prop interaction.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings mặc định dùng 'hover'
<UseAnimations animation={settings} interaction="click-replay" size={32} />

Đặt icon trong một button thật bằng render prop để nó có thể nhận focus và được trình đọc màn hình đọc lên. onClick của bạn chạy trước; gọi event.preventDefault() để bỏ qua hiệu ứng.

import download from 'react-useanimations/lib/download';

<UseAnimations
  animation={download}
  size={24}
  onClick={handleDownload}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="Tải xuống" {...eventProps}>
      <span {...animationProps} />
    </button>
  )}
/>

Tất cả prop đều có trong tài liệu. Ngoài React, các icon là tệp Lottie JSON; trang Icon Lottie hướng dẫn cách tái tạo các tương tác bằng lottie-web.

Câu hỏi thường gặp

Những icon nào dùng tương tác “Click phát lại”?

64 icon: X Octagon, Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out, Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 và 49 icon khác. Icon động khi click thường xác nhận các nút gửi, lưu, làm mới, tải xuống, thêm vào giỏ và định dạng văn bản.

Điều gì xảy ra khi người dùng bật giảm chuyển động?

Khi người dùng bật giảm chuyển động, cú click vẫn đến được handler của bạn nhưng hiệu ứng không phát. React component tự đọc prefers-reduced-motion và cập nhật ngay khi thiết lập này thay đổi, nên bạn không cần viết thêm code nào.

Làm sao đổi tương tác của một icon?

Mỗi icon chạy tương tác mà nó được thiết kế cho. Truyền interaction="click-replay" để icon khác cũng có hành vi này, hoặc một giá trị khác ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') để đổi sang tương tác tương ứng. Các prop autoplay, loop và speed điều chỉnh cách phát.

Tất cả icon tương tác “Click phát lại”

Cách hoạt động

Dùng ở đâu

Theo danh mục

Dùng trong React

Câu hỏi thường gặp