21 ikon · interaction="hover"

Ikon animasi hover

Ikon ini diputar maju saat pointer masuk dan berjalan mundur saat pointer keluar, sehingga gerakannya mengikuti kursor dan tidak pernah berhenti di tengah jalan. Cocok untuk item navigasi dan tombol yang memberi petunjuk tentang apa yang akan dibukanya: tutup tempat sampah terangkat, roda gigi pengaturan berputar, folder terbuka.

Semua ikon dengan interaksi hover

Cara kerjanya

Diputar maju saat mouseenter dan mundur saat mouseleave.

Jika pengguna memilih reduced motion, hover tidak memutar animasinya. Ketukan di layar sentuh tidak memulai animasi hover, sedangkan fokus keyboard memulainya jika ikon berada di dalam elemen yang bisa difokus. Komponen React menangani semua ini; Anda cukup memilih ikonnya.

Tempat memakainya

Item sidebar dan menu navigasi
Tombol hapus yang mengangkat tutupnya sebelum diklik
Tautan pengaturan dan profil
Kontrol zoom in dan zoom out
Tautan media sosial di footer

Berdasarkan kategori

Aksi · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
Konten · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
Media sosial · 3
Instagram, YouTube, YouTube V2

Pakai di React

Ikon yang tercantum di sini menjalankan interaksi ini secara default. Ikon lain pun bisa memakainya: cukup berikan prop interaction.

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

// Bookmark biasanya memakai 'click-toggle'
<UseAnimations animation={bookmark} interaction="hover" size={32} />

Letakkan ikon di dalam tautan atau tombol dengan render prop: animasi juga diputar saat elemen mendapat fokus keyboard, dan ketukan di layar sentuh tidak memicunya.

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

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> Arsipkan
    </a>
  )}
/>

Semua props dijelaskan di dokumentasi. Di luar React, ikon-ikon ini adalah file Lottie JSON; halaman Ikon Lottie menunjukkan cara membuat ulang interaksinya dengan lottie-web.

FAQ

Ikon mana saja yang memakai interaksi hover?

21 ikon: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share, dan 6 lainnya. Ikon hover biasanya menandai item navigasi, tombol hapus, pengaturan, kontrol zoom, dan tautan media sosial.

Apa yang terjadi jika pengguna memilih reduced motion?

Jika pengguna memilih reduced motion, hover tidak memutar animasinya. Komponen React membaca prefers-reduced-motion dan ikut menyesuaikan saat pengaturannya berubah, jadi Anda tidak perlu menulis kode apa pun untuk itu.

Bagaimana cara mengganti interaksi sebuah ikon?

Setiap ikon menjalankan interaksi yang memang dirancang untuknya. Berikan interaction="hover" agar ikon lain berperilaku seperti ini, atau nilai lain ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') untuk menggantinya. Props autoplay, loop, dan speed mengatur pemutarannya.