Langsung ke konten
ID

64 ikon · interaction="click-replay"

Ikon animasi klik

Ikon ini diputar sekali dari awal setiap kali diklik, sebagai konfirmasi kecil bahwa aksinya berhasil. Cocok untuk aksi sekali jalan yang tidak meninggalkan keadaan apa pun: kirim, simpan, muat ulang, unduh, cetak, atau hapus.

Semua ikon dengan interaksi putar ulang saat klik

Cara kerjanya

Diputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih.

Jika pengguna memilih reduced motion, klik tetap sampai ke handler Anda, tetapi animasinya tidak diputar. Komponen React menangani semua ini; Anda cukup memilih ikonnya.

Tempat memakainya

  • Tombol kirim di formulir chat dan komentar
  • Tombol simpan, unduh, dan unggah
  • Tombol muat ulang dan putar
  • Tombol tambah ke keranjang
  • Tombol format teks di editor

Berdasarkan kategori

  • Peringatan · 1

    X Octagon

  • Navigasi · 6

    Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out

  • Aksi · 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

  • Konten · 5

    File Minus, File Plus, Folder Minus, Folder Plus, User Check

  • Media · 6

    Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle

  • Pengeditan teks · 8

    Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline

  • Komunikasi · 3

    Phone, Phone Call, Send

  • Perangkat · 1

    Printer

  • E-commerce · 1

    Shopping Cart

  • Desain & tata letak · 3

    Crop, Mouse Pointer, Scissors

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

// Settings biasanya memakai 'hover'
<UseAnimations animation={settings} interaction="click-replay" size={32} />

Letakkan ikon di dalam tombol sungguhan dengan render prop, supaya bisa difokus dan dibacakan oleh pembaca layar. onClick Anda dijalankan lebih dulu; panggil event.preventDefault() untuk melewati animasinya.

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

<UseAnimations
  animation={download}
  size={24}
  onClick={handleDownload}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="Unduh" {...eventProps}>
      <span {...animationProps} />
    </button>
  )}
/>

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 putar ulang saat klik?

64 ikon: 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, dan 49 lainnya. Ikon klik biasanya mengonfirmasi tombol kirim, simpan, muat ulang, unduh, tambah ke keranjang, dan format teks.

Apa yang terjadi jika pengguna memilih reduced motion?

Jika pengguna memilih reduced motion, klik tetap sampai ke handler Anda, tetapi animasinya tidak diputar. 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="click-replay" 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.