Přejít na obsah
CS

64 ikon · interaction="click-replay"

Animované ikony na kliknutí

Tyto ikony se po každém kliknutí jednou přehrají od začátku a nenápadně tak potvrdí, že akce proběhla. Hodí se pro jednorázové akce, po kterých nezůstává žádný stav: odeslat, uložit, obnovit, stáhnout, vytisknout nebo smazat.

Všechny ikony s interakcí „přehrání kliknutím“

Jak se chová

Při každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb.

Když uživatel preferuje omezený pohyb, kliknutí se k vašemu handleru dostanou dál, ale animace se nepřehraje. O to všechno se postará React komponenta, vy jen vyberete ikonu.

Kde ji použít

  • Tlačítka odeslat v chatu a formulářích komentářů
  • Tlačítka uložit, stáhnout a nahrát
  • Tlačítka obnovit a otočit
  • Tlačítka Přidat do košíku
  • Tlačítka formátování textu v editorech

Podle kategorie

  • Upozornění · 1

    X Octagon

  • Navigace · 6

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

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

  • Obsah · 5

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

  • Média · 6

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

  • Úpravy textu · 8

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

  • Komunikace · 3

    Phone, Phone Call, Send

  • Zařízení · 1

    Printer

  • E-commerce · 1

    Shopping Cart

  • Design a layout · 3

    Crop, Mouse Pointer, Scissors

Použití v Reactu

Ikony v tomto seznamu přehrávají tuto interakci ve výchozím nastavení. Použít ji může i kterákoli jiná ikona: stačí jí předat prop interaction.

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

// Settings jinak používá 'hover'
<UseAnimations animation={settings} interaction="click-replay" size={32} />

Pomocí render prop vložte ikonu do skutečného tlačítka, aby na ni šlo přejít klávesnicí a čtečky obrazovky ji ohlásily. Váš onClick se spustí jako první; voláním event.preventDefault() animaci přeskočíte.

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

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

Všechny props najdete v dokumentaci. Mimo React jsou ikony Lottie JSON soubory; jak interakce vytvořit s lottie-web, ukazuje stránka Lottie ikony.

Časté dotazy

Které ikony používají interakci „přehrání kliknutím“?

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 a 49 dalších. Ikony na kliknutí obvykle potvrzují odeslání, uložení, obnovení, stažení, přidání do košíku a formátování textu.

Co se stane, když uživatel preferuje omezený pohyb?

Když uživatel preferuje omezený pohyb, kliknutí se k vašemu handleru dostanou dál, ale animace se nepřehraje. React komponenta čte prefers-reduced-motion a reaguje i na změnu nastavení, takže pro to nemusíte psát žádný kód.

Jak změnit interakci ikony?

Každá ikona přehrává interakci, pro kterou byla navržena. S interaction="click-replay" získá toto chování kterákoli jiná ikona, jinou hodnotou ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ho změníte. Přehrávání dál upravují props autoplay, loop a speed.