Langsung ke konten
ID

37 ikon · interaction="click-toggle"

Ikon animasi toggle saat diklik

Setiap klik menganimasikan ikon ke keadaan lainnya dan ikon tetap di sana, sehingga ikon ini menjadi bagian visual dari kontrol nyala/mati. Ikon selalu menunjukkan keadaan saat ini; pasangkan dengan aria-pressed atau atribut checked, dan tombolnya sudah menjelaskan dirinya sendiri.

Semua ikon dengan interaksi toggle saat klik

Cara kerjanya

Beralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih.

Jika pengguna memilih reduced motion, klik langsung memindahkan ikon ke keadaan lainnya tanpa animasi peralihan. Komponen React menangani semua ini; Anda cukup memilih ikonnya.

Tempat memakainya

  • Tombol bisukan dan aktifkan suara
  • Field tampilkan dan sembunyikan kata sandi
  • Tombol menu hamburger dan tutup
  • Kontrol play dan pause
  • Toggle suka, bintang, dan bookmark
  • Checkbox, radio button, dan switch

Berdasarkan kategori

  • Notifikasi · 2

    Notification, Notification V2

  • Navigasi · 4

    Burger Menu, Menu V2, Menu V3, Menu V4

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

  • Formulir · 3

    Checkbox, Radio button, Toggle

  • Media · 10

    Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume

  • Komunikasi · 1

    Phone Off

  • Perangkat · 1

    Wifi Off

  • Cuaca · 2

    Cloud Off, Zap Off

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

Klik men-toggle ikon dengan sendirinya. Agar tetap sinkron dengan state Anda, berikan active: ikon beranimasi setiap kali active berubah, dan klik tidak lagi men-toggle-nya sendiri.

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 menampilkan keadaan akhir
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Tutup menu' : 'Buka menu'}
    />
  );
}

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 toggle saat klik?

37 ikon: 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, dan 22 lainnya. Ikon toggle saat diklik biasanya dipakai untuk tombol bisukan/aktifkan suara, tampilkan/sembunyikan kata sandi, menu/tutup, play/pause, dan suka.

Apa yang terjadi jika pengguna memilih reduced motion?

Jika pengguna memilih reduced motion, klik langsung memindahkan ikon ke keadaan lainnya tanpa animasi peralihan. 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-toggle" 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. Untuk mengendalikan keadaannya sendiri, berikan active={isOn} dan perbarui nilainya di onClick: klik tidak lagi men-toggle ikon dengan sendirinya.