NumberInput
Быстрый старт
Управление внешним видом
Внешний вид компонента зависит от свойств view и size:
- View
- Size
Форма компонента
Форма задается с помощью свойств segmentation и shape:
- Segmentation
- Shape
С помощью свойства segmentation можно изменить отступы между кнопками и полем ввода:
С помощью свойства shape можно изменить скругление углов:
Ограничения значений
С помощью свойств min, max и step можно задать допустимый диапазон и шаг изменения:
Точность вычислений
С помощью свойства precision можно задать количество знаков после запятой:
Вспомогательный текст
С помощью свойств textBefore и textAfter можно добавить текст слева и справа от числа:
Ручной ввод
Свойство isManualInput разрешает редактировать значение непосредственно в поле ввода:
Отображение без значения
Свойство displayWithoutValue управляет тем, что показывается, когда значение не задано:
'input'— отображается весь компонент (по умолчанию);'increment'— отображается только кнопка увеличения;'decrement'— отображается только кнопка уменьшения.
Поведение при достижении границ
Свойство limitBehavior управляет поведением кнопок при достижении значений min/max:
'disabled'— кнопка становится неактивной (по умолчанию);'hidden'— кнопка скрывается, поле ввода растягивается.
- Disabled
- Hidden
Пользовательские кнопки
Кнопки увеличения и уменьшения можно кастомизировать:
- Иконки
- Кастомные кнопки
С помощью свойств decrementIcon и incrementIcon можно заменить иконки кнопок:
С помощью свойств customDecrementButton и customIncrementButton можно полностью заменить кнопки.
В этом случае логику изменения значения нужно реализовать самостоятельно:
Состояния
- Disabled
- Loading