İçeriğe geç
TR

64 ikon · interaction="click-replay"

Tıklamalı animasyonlu ikonlar

Bu ikonlar her tıklandıklarında baştan bir kez oynar; işlemin gerçekleştiğine dair küçük bir onaydır. Geride bir durum bırakmayan tek seferlik işlemlere uyarlar: gönder, kaydet, yenile, indir, yazdır ya da sil.

“Tıklayınca tekrar” etkileşimli tüm ikonlar

Nasıl davranır

Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar.

Azaltılmış hareket tercih edildiğinde tıklamalar yine handler’ınıza ulaşır, ancak animasyon oynamaz. Bunların hepsini React bileşeni halleder; siz yalnızca ikonu seçersiniz.

Nerede kullanılır

  • Sohbet ve yorum formlarında gönder düğmeleri
  • Kaydet, indir ve yükle düğmeleri
  • Yenile ve döndür düğmeleri
  • Sepete ekle düğmeleri
  • Editörlerde metin biçimlendirme düğmeleri

Kategoriye göre

  • Uyarılar · 1

    X Octagon

  • Navigasyon · 6

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

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

  • İçerik · 5

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

  • Medya · 6

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

  • Metin düzenleme · 8

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

  • İletişim · 3

    Phone, Phone Call, Send

  • Cihazlar · 1

    Printer

  • E-ticaret · 1

    Shopping Cart

  • Tasarım ve yerleşim · 3

    Crop, Mouse Pointer, Scissors

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

Odaklanabilmesi ve ekran okuyucuların duyurabilmesi için ikonu render prop’uyla gerçek bir düğmenin içine koyun. Sizin onClick’iniz önce çalışır; animasyonu atlamak için event.preventDefault() çağırın.

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

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

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 tekrar” etkileşimini kullanır?

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 ve 49 ikon daha. Tıklamalı ikonlar genellikle gönder, kaydet, yenile, indir, sepete ekle ve biçimlendirme düğmelerinde işlemi onaylar.

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

Azaltılmış hareket tercih edildiğinde tıklamalar yine handler’ınıza ulaşır, ancak animasyon oynamaz. 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-replay" 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.