NumberInput и работа с числами

Компонент NumberInput является специализированным элементом интерфейса для ввода числовых значений с возможностью контроля диапазона, шагов и формата отображения. В библиотеке Carbon Components Svelte этот компонент реализован с учётом всех требований к доступности, удобству взаимодействия и интеграции с реактивной моделью Svelte.

Основная структура NumberInput
  • bind:value — реактивная привязка значения, обеспечивающая синхронизацию состояния компонента с переменной.
  • min / max — ограничения диапазона допустимых значений.
  • step — шаг изменения числа при использовании кнопок увеличения/уменьшения.
  • id / label — атрибуты для корректного связывания поля с подписью и обеспечения доступности.

Работа с шагами и ограничениями

NumberInput позволяет управлять увеличением и уменьшением значения через стрелки:

  • При нажатии на стрелку вверх значение увеличивается на величину step, при нажатии вниз — уменьшается.
  • При достижении min или max дальнейшее изменение блокируется, предотвращая выход за пределы диапазона.

Особенности поведения при ручном вводе:

  • Если введённое число выходит за пределы min/max, компонент автоматически корректирует его к ближайшему допустимому значению.
  • Некорректный ввод (например, текст) игнорируется, сохраняя предыдущее валидное значение.

Форматирование отображаемого числа

Компонент поддерживает кастомное отображение чисел через проп format и встроенные функции форматирования:

 `${val.toFixed(2)}%`}
/>
  • Функция format вызывается при каждом рендере, позволяя отображать значения в любом нужном формате, например валюты, проценты или с разделителями тысяч.

Валидация и обработка ошибок

NumberInput интегрирован с системой валидации через проп invalid и invalidText:

 10}
  invalidText="Число должно быть от 1 до 10"
/>
  • invalid — булево значение, определяющее состояние ошибки.
  • invalidText — текст ошибки, который отображается под полем ввода при нарушении условий.

Использование этих пропов позволяет строить динамическую проверку значений и мгновенно информировать пользователя о некорректном вводе.

Интерактивные события

NumberInput поддерживает несколько событий для работы с реактивной логикой:

  • on:input — срабатывает при каждом изменении значения.
  • on:change — срабатывает после завершения ввода или при потере фокуса.
  • on:focus / on:blur — обработка фокуса, полезно для кастомной подсветки или валидации при уходе с поля.

Пример:

 console.log('Input:', e.detail.value)}
  on:change={(e) => console.log('Change:', e.detail.value)}
/>

Работа с большими числами и дробями

Для точной работы с дробными числами рекомендуется использовать step, который задаёт необходимую точность:

  • Это предотвращает проблемы округления при ручном вводе.
  • В комбинации с format можно отображать значения с фиксированной точностью.

Стилизация и темы

NumberInput наследует стили Carbon и поддерживает все темы (light/dark). Дополнительно можно управлять стилями через классы Svelte:
  • Стилизация не нарушает внутреннюю логику компонента.
  • Все внутренние элементы (кнопки, поле ввода, подпись, текст ошибки) остаются полностью функциональными.

Интеграция с формами

NumberInput легко интегрируется с формами Svelte, включая использование реактивных объектов:
  • Связь через bind:value позволяет обновлять объект формы автоматически при каждом изменении поля.
  • Упрощает обработку данных при отправке форм.

Практические рекомендации

  • Использовать step для контроля точности чисел.
  • Всегда задавать min и max для предотвращения некорректного ввода.
  • Применять format для пользовательского отображения чисел.
  • Использовать invalid / invalidText для динамической валидации.
  • Для интеграции с формами применять bind:value к объектам или переменным Svelte.
Оглавление