КОД СНИППЕТА ДЛЯ ВСТАВКИ:
КАК ЭТО ВСТРОИТЬ В КНОПКУ
Добавляете повыше код сниппета.
Делаете кнопку. Это должен быть один элемент тильды. В него можно добавлять анимацию, но очень нежелательно использовать какой-либо код, который её скрывает/переключает/двигает. Также нельзя ни в коем случае менять прозрачность его или того, что внутри. Я не гарантирую работоспособность при нарушении этих правил.
Внутрь элемента тильды мы кладём вот такой код:
Поделиться с другом
Внутри тега то, что начинается с "data" - это параметры. Все параметры опциональны, если их удалить, то будут показываться значения по умолчанию. Именно удалить полностью, не оставить пустую строку в кавычках.
Вот список параметров:
data-text-normal - какой текст отображается на кнопке обычно. Значение по умолчанию: "Поделиться с другом".
data-text-success - какой текст отображается на кнопке после успешного копирования. (текст ошибки не настраивается) Значение по умолчанию: "Успешно скопировано!"
data-text-copy - какой текст мы копируем в строку обмена. Значение по умолчанию: содержимое поля href тега
. Если у тега не указана ссылка, то сниппет упадёт с ошибкой.
Заполняя эти параметры, вы можете настроить сниппет под себя. Модифицирование кода не требуется!
Пример элемента из моего теста:
Фичи сниппета:
- Смена текста анимирована через изменение прозрачности.
- Одна кнопка - один таймер, сколько бы раз пользователь на неё ни кликнул. Браузер не перегружается таймерами.
- Лёгкая кастомизация.
- Должно работать на всех браузерах 2016 года и моложе.