Input_Field

Счетчик

Для активного состояния:

<div class="ml-input-field" data-input-field>
	<div class="ml-input-field__minus">
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="evenodd" d="M22 15v2H10v-2z"></path>
		</svg>
	</div>
	<input class="ml-input-field__input" value="1">
	<div class="ml-input-field__plus">
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="evenodd" d="M17 15h5v2h-5v5h-2v-5h-5v-2h5v-5h2v5z"></path>
		</svg>
	</div>
</div>

Для неактивного состояния:

<div class="ml-input-field is-disabled" data-input-field>
	<div class="ml-input-field__minus">
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="evenodd" d="M22 15v2H10v-2z"></path>
		</svg>
	</div>
	<input class="ml-input-field__input" value="1">
	<div class="ml-input-field__plus">
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="evenodd" d="M17 15h5v2h-5v5h-2v-5h-5v-2h5v-5h2v5z"></path>
		</svg>
	</div>
</div>

Расширенные настройки

класс is-disabled отключает кнопки

начальное значение счетчика указывается в value

npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-input-field] (https://www.npmjs.com/package/@megalabs/ml-input-field)

Для установки пакета

• npm i @megalabs/ml-input-field
• затем в папке @megalabs/ml-input-field запускаем npm install
• npm start