Přejít na obsah
CS

37 ikon · interaction="click-toggle"

Animované ikony přepínané kliknutím

Každé kliknutí ikonu animuje do druhého stavu, ve kterém zůstane, takže tvoří vizuální polovinu ovládacího prvku zapnuto/vypnuto. Ikona vždy ukazuje aktuální stav: doplňte k ní aria-pressed nebo atribut checked a tlačítko bude srozumitelné samo o sobě.

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

Jak se chová

Kliknutím se přepíná mezi dvěma stavy; když uživatel preferuje omezený pohyb, přepne se okamžitě.

Když uživatel preferuje omezený pohyb, kliknutí přepne do druhého stavu okamžitě, bez animace mezi nimi. O to všechno se postará React komponenta, vy jen vyberete ikonu.

Kde ji použít

  • Tlačítka pro ztlumení a zrušení ztlumení
  • Pole hesla se zobrazením a skrytím
  • Hamburger menu a tlačítka pro zavření
  • Ovládání přehrát a pozastavit
  • Přepínače To se mi líbí, hvězdičky a záložek
  • Zaškrtávací políčka, přepínače (radio) a vypínače

Podle kategorie

  • Notifikace · 2

    Notification, Notification V2

  • Navigace · 4

    Burger Menu, Menu V2, Menu V3, Menu V4

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

  • Formuláře · 3

    Checkbox, Radio button, Toggle

  • Média · 10

    Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume

  • Komunikace · 1

    Phone Off

  • Zařízení · 1

    Wifi Off

  • Počasí · 2

    Cloud Off, Zap Off

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

Kliknutí ikonu přepínají sama. Pokud ji chcete mít v souladu se svým stavem, předejte active: ikona se animuje pokaždé, když se active změní, a kliknutí ji sama o sobě už nepřepínají.

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 zobrazí koncový stav
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Zavřít menu' : 'Otevřít menu'}
    />
  );
}

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řepínání kliknutím“?

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 a 22 dalších. Ikony přepínané kliknutím obvykle ovládají ztlumení, zobrazení a skrytí hesla, otevření a zavření menu, přehrávání a pauzu nebo tlačítka To se mi líbí.

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

Když uživatel preferuje omezený pohyb, kliknutí přepne do druhého stavu okamžitě, bez animace mezi nimi. 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-toggle" 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. Pokud chcete stav řídit sami, předejte active={isOn} a měňte ho v onClick: kliknutí pak ikonu sama nepřepínají.