21 icon · interaction="hover"

Icon động khi hover

Những icon này phát xuôi khi con trỏ đi vào và chạy ngược lại khi con trỏ rời đi, nên chuyển động luôn bám theo con trỏ và không bao giờ dừng lửng giữa chừng. Chúng hợp với mục điều hướng và nút bấm cần gợi ý trước nội dung sẽ mở ra: nắp thùng rác nhấc lên, bánh răng cài đặt xoay, thư mục mở ra.

Tất cả icon tương tác “Hover”

Cách hoạt động

Phát xuôi khi con trỏ đi vào (mouseenter) và phát ngược khi con trỏ rời đi (mouseleave).

Khi người dùng bật giảm chuyển động, hover không phát hiệu ứng. Chạm trên màn hình cảm ứng không kích hoạt hiệu ứng hover, còn focus bằng bàn phím thì có, nếu icon nằm trong một phần tử có thể focus. React component lo hết những việc này; bạn chỉ cần chọn icon.

Dùng ở đâu

Mục menu trong sidebar và thanh điều hướng
Nút xóa nhấc nắp thùng rác trước khi click
Liên kết cài đặt và hồ sơ
Nút phóng to và thu nhỏ
Liên kết mạng xã hội ở footer

Theo danh mục

Thao tác · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
Nội dung · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
Mạng xã hội · 3
Instagram, YouTube, YouTube V2

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 bookmark from 'react-useanimations/lib/bookmark';

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

Đặt icon trong một link hoặc button bằng render prop: khi đó hiệu ứng cũng phát khi phần tử nhận focus bằng bàn phím, và chạm trên màn hình cảm ứng sẽ không kích hoạt nó.

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

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> Lưu trữ
    </a>
  )}
/>

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 “Hover”?

21 icon: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share và 6 icon khác. Icon động khi hover thường dùng cho mục điều hướng, nút xóa, cài đặt, nút phóng to/thu nhỏ và liên kết mạng xã hội.

Đ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, hover không phát hiệu ứng. 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="hover" để 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.