Zum Inhalt springen
DE

37 Icons · interaction="click-toggle"

Animierte Icons zum Umschalten per Klick

Jeder Klick animiert zwischen zwei Zuständen, und das Icon bleibt im neuen Zustand. Damit ist es die sichtbare Hälfte eines Ein-/Aus-Schalters. Da das Icon immer den aktuellen Zustand zeigt, erklärt sich der Button von selbst, sobald er zusätzlich aria-pressed oder ein checked-Attribut bekommt.

Alle Icons mit Klick-Toggle

So verhält es sich

Wechselt per Klick zwischen zwei Zuständen; bei reduzierter Bewegung springt es sofort um.

Ist reduzierte Bewegung eingestellt, wechselt ein Klick sofort in den anderen Zustand, ohne die Animation dazwischen. All das übernimmt die React-Komponente, Sie wählen nur das Icon aus.

Einsatzmöglichkeiten

  • Buttons zum Stumm- und Lautschalten
  • Passwortfelder mit Anzeigen und Verbergen
  • Hamburger-Menü und Schließen-Button
  • Play und Pause
  • Toggles für Like, Stern und Lesezeichen
  • Checkboxen, Radiobuttons und Schalter

Nach Kategorie

  • Benachrichtigungen · 2

    Notification, Notification V2

  • Navigation · 4

    Burger Menu, Menu V2, Menu V3, Menu V4

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

  • Formulare · 3

    Checkbox, Radio button, Toggle

  • Medien · 10

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

  • Kommunikation · 1

    Phone Off

  • Geräte · 1

    Wifi Off

  • Wetter · 2

    Cloud Off, Zap Off

In React verwenden

Die hier aufgeführten Icons spielen diese Interaktion standardmäßig ab. Jedes andere Icon kann sie ebenfalls nutzen: Übergeben Sie dazu das Prop interaction.

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

// Settings nutzt normalerweise 'hover'
<UseAnimations animation={settings} interaction="click-toggle" size={32} />

Klicks schalten das Icon von selbst um. Um es mit Ihrem State synchron zu halten, übergeben Sie active: Das Icon animiert bei jeder Änderung von active, und Klicks allein schalten es nicht mehr um.

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 zeigt den Endzustand
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Menü schließen' : 'Menü öffnen'}
    />
  );
}

Alle Props stehen in der Dokumentation. Außerhalb von React sind die Icons Lottie-JSON-Dateien; unter Lottie-Icons sehen Sie, wie Sie die Interaktionen mit lottie-web nachbauen.

Häufige Fragen

Welche Icons nutzen die Interaktion „Klick-Toggle“?

37 Icons: 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 und 22 weitere. Typische Einsätze für Icons mit Klick-Toggle sind Buttons für Stumm/Laut, Passwort anzeigen/verbergen, Menü/Schließen, Play/Pause und Like.

Was passiert, wenn reduzierte Bewegung eingestellt ist?

Ist reduzierte Bewegung eingestellt, wechselt ein Klick sofort in den anderen Zustand, ohne die Animation dazwischen. Die React-Komponente liest prefers-reduced-motion aus und reagiert, sobald sich die Einstellung ändert. Sie brauchen dafür keinen eigenen Code.

Wie ändere ich die Interaktion eines Icons?

Jedes Icon spielt die Interaktion ab, für die es gestaltet wurde. Mit interaction="click-toggle" bekommt jedes andere Icon dieses Verhalten, mit einem anderen Wert ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ein anderes. Die Props autoplay, loop und speed steuern die Wiedergabe. Um den Zustand selbst zu steuern, übergeben Sie active={isOn} und aktualisieren den Wert in onClick: Klicks schalten das Icon dann nicht mehr von selbst um.