37 ikon · interaction="click-toggle"

Tıklayınca durum değiştiren animasyonlu ikonlar

Her tıklamada iki durum arasında animasyonla geçer ve yeni durumda kalırlar; bu da onları bir aç/kapa kontrolünün görsel yarısı yapar. İkon her zaman mevcut durumu gösterdiği için aria-pressed ya da checked özniteliğiyle birlikte kullanın, düğme kendini anlatsın.

“Tıklayınca geçiş” etkileşimli tüm ikonlar

Nasıl davranır

Tıklandığında iki durum arasında geçiş yapar; azaltılmış hareket tercih edildiğinde ise animasyonsuz, anında geçer.

Azaltılmış hareket tercih edildiğinde tıklama, aradaki animasyon olmadan anında diğer duruma geçer. Bunların hepsini React bileşeni halleder; siz yalnızca ikonu seçersiniz.

Nerede kullanılır

Sesi kapat ve aç düğmeleri
Şifreyi göster ve gizle alanları
Hamburger menü ve kapat düğmeleri
Oynat ve duraklat kontrolleri
Beğen, yıldız ve yer imi düğmeleri
Onay kutuları, radyo düğmeleri ve switch’ler

Kategoriye göre

Bildirimler · 2
Notification, Notification V2
Navigasyon · 4
Burger Menu, Menu V2, Menu V3, Menu V4
Eylemler · 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
Form · 3
Checkbox, Radio button, Toggle
Medya · 10
Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume
İletişim · 1
Phone Off
Cihazlar · 1
Wifi Off
Hava durumu · 2
Cloud Off, Zap Off

React’te kullanın

Burada listelenen ikonlar varsayılan olarak bu etkileşimi oynatır. Diğer ikonlar da kullanabilir: interaction prop’unu geçmeniz yeterli.

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

// Settings normalde 'hover' kullanır
<UseAnimations animation={settings} interaction="click-toggle" size={32} />

Tıklamalar ikonu kendiliğinden değiştirir. İkonu kendi state’inizle senkron tutmak için active geçin: ikon active her değiştiğinde animasyon oynatır ve tıklamalar artık onu kendi başına değiştirmez.

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 bitiş durumunu gösterir
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Menüyü kapat' : 'Menüyü aç'}
    />
  );
}

Tüm prop’lar dokümantasyonda. React dışında ikonlar Lottie JSON dosyalarıdır; etkileşimlerin lottie-web ile nasıl yeniden oluşturulacağını Lottie ikonları sayfası gösterir.

Sık sorulan sorular

Hangi ikonlar “Tıklayınca geçiş” etkileşimini kullanır?

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 ve 22 ikon daha. Tıklayınca durum değiştiren ikonlar genellikle sesi kapat/aç, şifreyi göster/gizle, menü/kapat, oynat/duraklat ve beğen düğmelerinde kullanılır.

Kullanıcı azaltılmış hareketi tercih ederse ne olur?

Azaltılmış hareket tercih edildiğinde tıklama, aradaki animasyon olmadan anında diğer duruma geçer. React bileşeni prefers-reduced-motion ayarını okur ve ayar değiştiğinde güncellenir; bunun için kod yazmanız gerekmez.

Bir ikonun etkileşimini nasıl değiştiririm?

Her ikon kendisi için tasarlanan etkileşimi oynatır. Herhangi bir ikona bu davranışı vermek için interaction="click-toggle" geçin; başka bir davranış için başka bir değer ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') kullanın. Oynatmayı autoplay, loop ve speed prop’larıyla ayarlayabilirsiniz. Durumu kendiniz yönetmek için active={isOn} geçin ve onClick içinde güncelleyin: tıklamalar artık ikonu kendiliğinden değiştirmez.