37 icon · interaction="click-toggle"

Icon động bật/tắt khi click

Mỗi cú click làm icon chuyển động sang trạng thái còn lại và dừng ở đó, nên chúng chính là phần hình ảnh của một nút bật/tắt. Icon luôn thể hiện trạng thái hiện tại; chỉ cần kết hợp với aria-pressed hoặc thuộc tính checked là nút bấm tự nói lên chức năng của nó.

Tất cả icon tương tác “Click bật/tắt”

Cách hoạt động

Chuyển giữa hai trạng thái khi click, hoặc chuyển ngay lập tức 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 chuyển ngay sang trạng thái còn lại, bỏ qua hiệu ứng ở giữa. React component lo hết những việc này; bạn chỉ cần chọn icon.

Dùng ở đâu

Nút tắt/bật tiếng
Ô mật khẩu có nút ẩn/hiện
Nút menu hamburger và nút đóng
Nút phát và tạm dừng
Nút thích, gắn sao và đánh dấu
Checkbox, radio button và công tắc

Theo danh mục

Thông báo · 2
Notification, Notification V2
Điều hướng · 4
Burger Menu, Menu V2, Menu V3, Menu V4
Thao tác · 14
Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3
Biểu mẫu · 3
Checkbox, Radio button, Toggle
Đa phương tiện · 10
Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume
Liên lạc · 1
Phone Off
Thiết bị · 1
Wifi Off
Thời tiết · 2
Cloud Off, Zap Off

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-toggle" size={32} />

Cú click tự bật/tắt icon. Để icon luôn khớp với state của bạn, hãy truyền active: icon sẽ chuyển động mỗi khi active thay đổi, và cú click không còn tự bật/tắt nó nữa.

import { useState } from 'react';
import menu from 'react-useanimations/lib/menu';

export function MenuButton() {
  const [open, setOpen] = useState(false);
  return (
    <UseAnimations
      animation={menu}
      active={open} // true hiển thị trạng thái cuối
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Đóng menu' : 'Mở menu'}
    />
  );
}

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 bật/tắt”?

37 icon: Notification, Notification V2, Burger Menu, Menu V2, Menu V3, Menu V4, Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off và 22 icon khác. Icon bật/tắt khi click thường dùng cho các nút tắt/bật tiếng, ẩn/hiện mật khẩu, menu/đóng, phát/tạm dừng và thích.

Đ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 chuyển ngay sang trạng thái còn lại, bỏ qua hiệu ứng ở giữa. 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-toggle" để 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. Nếu muốn tự quản lý trạng thái, hãy truyền active={isOn} và cập nhật nó trong onClick: khi đó cú click sẽ không tự bật/tắt icon nữa.