Модуль является готовым блоком для выбора количества (например, товара в интернет-магазине).
Подключение модуля
[HTML] В нужном месте вызвать снипет quantity . Будет построена структура модуля с кнопками и полем ввода. Классы и структуру можно поменять под свои нужды. В атрибуте значения value указываем начальное значение количества.
<div data-quantity class="quantity">
<button data-quantity-plus type="button" class="quantity__button quantity__button_plus"></button>
<div class="quantity__input">
<input data-quantity-value type="text" name="" value="1">
</div>
<button data-quantity-minus type="button" class="quantity__button quantity__button_minus"></button>
</div>
[SCSS] (не обязательно) Если вы хотите сразу посмотреть на работу блока и оставили классы, предложенные снипетом, вы можете раскомментировать строку @import “quantity”; в файле src/scss/base/forms/ forms .scss – это подключит базовые стили, их можно отредактировать под свои потребности.
[JS] В файле js/app.js раскомментировать строку flsForms.formQuantity();
Дополнительные параметры
К элементу <INPUT> можно добавить дополнительные настройки:
- data-quantity-max=’число’ установит максимальное значение поля
- data-quantity-min=’число’ установит минимальное значение поля