Компонент выводит и анимирует цифровую статистику, которая является очень распространенным элементом в дизайне.
Расположение компонента
Файлы компонента находятся в папке src/components/layout/digcounter, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.
Использование компонента
В HTML, вы можете использовать снипет digcounter или построить HTML-структуру самостоятельно:
<div data-fls-watcher class="block"><div data-fls-digcounter class="block__item">1500</div><div data-fls-digcounter class="block__item">500</div><div data-fls-digcounter class="block__item">800</div>...</div>Обратите внимание, для запуска анимации используется компонент «Наблюдатель» , поэтому к родительскому элементу счетчика добавлен дата-атрибут data-fls-watcher
Дополнительные возможности
Изменение скорости
Для изменения скорости анимации необходимо добавить атрибут data-fls-digcounter-speed к элементу счетчика и указать скорость в миллисекундах (1000 по умолчанию)
<div data-fls-watcher class="block"><div data-fls-digcounter data-fls-digcounter-speed="500" class="block__item">1500</div><div data-fls-digcounter data-fls-digcounter-speed="200" class="block__item">500</div><div data-fls-digcounter data-fls-digcounter-speed="1700" class="block__item">800</div>...</div>Форматирование
Существует возможность форматирования вывода цифр, отделяя тысячи сотри тысяч и т.д. Для этого нужно добавить атрибут data-fls-digcounter-format к элементу счетчика. Для настройки разграничителя можно добавить символ в качестве значения атрибута (по умолчанию пробел)
<div data-fls-watcher class="block"><div data-fls-digcounter data-fls-digcounter-format="." class="block__item">1500</div><div data-fls-digcounter data-fls-digcounter-format class="block__item">500</div><div data-fls-digcounter data-fls-digcounter-format="," class="block__item">800</div>...</div>