Counter
Счётчик с кнопками, цифры которого крутятся как в механическом счётчике — каждая на своём барабане.
зависимости 0файлы tsx + cssпараметры 9react 18+
X 0000 Y 0000↳ Нажимайте − и +
Пульт09 параметров
01min
Минимальное значение.
02max
Максимальное значение.
03step
Шаг за одно нажатие.
04places
Минимум разрядов (07).
05fontSize
px
Размер цифр.
06buttons
Показывать кнопки − / +.
07duration
ms
Время прокрутки.
08textColor
Цвет цифр.
09accentColor
Цвет кнопок при наведении.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
min | number | 0 | Минимальное значение. |
max | number | 999 | Максимальное значение. |
step | number | 1 | Шаг за одно нажатие. |
places | number | 2 | Минимум разрядов (07). |
fontSize | number | 72 | Размер цифр. |
buttons | boolean | true | Показывать кнопки − / +. |
duration | number | 600 | Время прокрутки. |
textColor | string | "#edeae3" | Цвет цифр. |
accentColor | string | "#b6e24c" | Цвет кнопок при наведении. |
value | number | — | Контролируемое значение; без него счётчик хранит своё. |
defaultValue | number | 0 | Начальное значение без контроля. |
onChange | (value: number) => void | — | Вызывается с новым значением. |
labels | { decrease?, increase? } | — | Текст кнопок для скринридеров. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |