Перейти к содержимому
RU

37 иконок · interaction="click-toggle"

Иконки-переключатели с анимацией по клику

Каждый клик анимирует переход между двумя состояниями, и иконка остаётся в новом, поэтому такие иконки — визуальная часть элемента «вкл/выкл». Иконка всегда показывает текущее состояние: добавьте кнопке aria-pressed или атрибут checked, и она будет говорить сама за себя.

Все иконки со взаимодействием «Переключение по клику»

Как это работает

Переключается между двумя состояниями по клику, а при включённом уменьшении движения — сразу, без анимации.

Если включено уменьшение движения, клик сразу переключает иконку в другое состояние, без промежуточной анимации. Всё это берёт на себя React-компонент — вам остаётся только выбрать иконку.

Где использовать

  • Кнопки включения и отключения звука
  • Поля с кнопкой «показать/скрыть пароль»
  • Бургер-меню и кнопки закрытия
  • Кнопки воспроизведения и паузы
  • Переключатели лайка, звёздочки и закладки
  • Чекбоксы, радиокнопки и переключатели

По категориям

Использование в React

Перечисленные здесь иконки проигрывают это взаимодействие по умолчанию. Его можно задать и любой другой иконке — через проп interaction.

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

// Settings по умолчанию использует 'hover'
<UseAnimations animation={settings} interaction="click-toggle" size={32} />

По умолчанию иконка переключается от кликов. Чтобы синхронизировать её с вашим состоянием, передайте active: иконка анимируется при каждом изменении active, а клики её больше не переключают.

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 показывает конечное состояние
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Закрыть меню' : 'Открыть меню'}
    />
  );
}

Все пропсы описаны в документации. Вне React иконки — это файлы Lottie JSON; на странице Lottie-иконки показано, как воссоздать взаимодействия с помощью lottie-web.

Частые вопросы

Какие иконки используют взаимодействие «Переключение по клику»?

37 иконок: 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 и ещё 22. Иконки-переключатели обычно управляют звуком, показом пароля, открытием меню, воспроизведением и лайками.

Что происходит, если у пользователя включено уменьшение движения?

Если включено уменьшение движения, клик сразу переключает иконку в другое состояние, без промежуточной анимации. React-компонент читает prefers-reduced-motion и реагирует на изменение настройки, так что писать для этого код не нужно.

Как изменить взаимодействие иконки?

Каждая иконка проигрывает то взаимодействие, для которого её нарисовали. Передайте interaction="click-toggle", чтобы так же вела себя любая другая иконка, или другое значение ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay'), чтобы сменить его. Воспроизведение настраивается пропсами autoplay, loop и speed. Чтобы управлять состоянием самостоятельно, передайте active={isOn} и меняйте его в onClick: тогда клики сами по себе иконку больше не переключают.