21 ikon · interaction="hover"

Hover efektli animasyonlu ikonlar

Bu ikonlar imleç üzerlerine geldiğinde ileri, ayrıldığında geri oynar; böylece hareket imleci izler ve asla yarıda kalmaz. Ne açtığını ima eden navigasyon öğelerine ve düğmelere uyarlar: çöp kutusunun kapağı kalkar, ayarlar dişlisi döner, klasör açılır.

“Hover” etkileşimli tüm ikonlar

Nasıl davranır

mouseenter’da ileri, mouseleave’de geri oynar.

Azaltılmış hareket tercih edildiğinde hover animasyonu oynatmaz. Dokunmatik ekranlarda dokunmak hover animasyonlarını başlatmaz; ikon odaklanabilir bir öğenin içindeyse klavye odağı başlatır. Bunların hepsini React bileşeni halleder; siz yalnızca ikonu seçersiniz.

Nerede kullanılır

Kenar çubuğu ve navigasyon menüsü öğeleri
Tıklamadan önce kapağı kaldıran sil düğmeleri
Ayarlar ve profil bağlantıları
Yakınlaştır ve uzaklaştır kontrolleri
Footer’daki sosyal medya bağlantıları

Kategoriye göre

Eylemler · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
İçerik · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
Sosyal medya · 3
Instagram, YouTube, YouTube V2

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

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

İkonu render prop’uyla bir bağlantı ya da düğmenin içine koyun: animasyon, öğe klavye odağı aldığında da oynar ve dokunmatik ekranlardaki dokunuşlar onu tetiklemez.

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

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> Arşiv
    </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 “Hover” etkileşimini kullanır?

21 ikon: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share ve 6 ikon daha. Hover efektli ikonlar genellikle navigasyon öğelerinde, sil düğmelerinde, ayarlarda, yakınlaştırma kontrollerinde ve sosyal medya bağlantılarında kullanılır.

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

Azaltılmış hareket tercih edildiğinde hover animasyonu oynatmaz. 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="hover" 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.