Přejít na obsah
CS

144 ikon · interaction="hover-replay"

Animované ikony s přehráním při hoveru

Tyto ikony se při najetí myší jednou přehrají a doběhnou samy, takže rychlé přejetí přes panel nástrojů nezpůsobí roztěkaný pohyb. Takhle funguje většina sady: šipky, soubory, zařízení, počasí a ikony značek, které při hoveru ožijí.

Všechny ikony s interakcí „přehrání při hoveru“

Jak se chová

Při najetí myší (mouseenter) se jednou přehraje, pokud uživatel nepreferuje omezený pohyb. Odjetí myši ji nezastaví a nové najetí během přehrávání ji nespustí znovu.

Když uživatel preferuje omezený pohyb, najetí myší animaci nespustí. Klepnutí na dotykové obrazovce hover animace nespouští, fokus z klávesnice ano, pokud je ikona uvnitř fokusovatelného prvku. O to všechno se postará React komponenta, vy jen vyberete ikonu.

Kde ji použít

  • Seznamy funkcí a ceníky
  • Odkazy se šipkou a tlačítka s výzvou k akci
  • Tlačítka panelů nástrojů v editorech a dashboardech
  • Karty v mřížce na landing page
  • Odkazy v patičce a kontakty

Podle kategorie

  • Navigace · 22

    Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar

  • Akce · 6

    Award, Key, Maximize 2, Minimize 2, Shield, Slash

  • Obsah · 10

    Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users

  • Média · 11

    Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV

  • Úpravy textu · 2

    Hash, List

  • Komunikace · 9

    At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail

  • Zařízení · 10

    Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi

  • Počasí · 13

    Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap

  • Mapy a poloha · 8

    Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target

  • E-commerce · 10

    Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck

  • Grafy · 5

    Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up

  • Vývoj · 8

    Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server

  • Design a layout · 7

    Columns, Grid, Layers, Layout, Move, Pen Tool, Table

  • Tvary a matematika · 8

    Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle

  • Sociální sítě · 9

    Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X

  • Ostatní · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

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

Nechte na hover reagovat celou kartu nebo odkaz, ne jen ikonu: s render prop jdou události na váš prvek a animaci přehraje i fokus z klávesnice.

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Týdenní růst
    </a>
  )}
/>

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í při hoveru“?

144 ikon: Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down a 129 dalších. Ikony s přehráním při hoveru obvykle oživí odkazy se šipkou, seznamy funkcí, tlačítka panelů nástrojů a karty na landing page.

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

Když uživatel preferuje omezený pohyb, najetí myší animaci nespustí. 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="hover-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.