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

64 иконки · interaction="click-replay"

Иконки с анимацией по клику

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

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

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

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

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

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

  • Кнопки отправки в чатах и формах комментариев
  • Кнопки сохранения, скачивания и загрузки
  • Кнопки обновления и поворота
  • Кнопки «В корзину»
  • Кнопки форматирования текста в редакторах

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

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

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

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

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

Поместите иконку в настоящую кнопку через render-проп, чтобы на неё можно было перевести фокус и чтобы скринридеры её объявляли. Ваш onClick выполняется первым; вызовите event.preventDefault(), чтобы пропустить анимацию.

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

<UseAnimations
  animation={download}
  size={24}
  onClick={handleDownload}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="Скачать" {...eventProps}>
      <span {...animationProps} />
    </button>
  )}
/>

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

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

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

64 иконки: 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 и ещё 49. Анимация по клику обычно подтверждает отправку, сохранение, обновление, скачивание, добавление в корзину и форматирование.

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

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

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

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