Input
Поле для ввода с плейсхолдером
Для нормального состояния:
<div class="ml-input">
<input type="text" class="ml-input__input" placeholder="Placeholder">
</div>
Для состояния некорректного ввода:
<div class="ml-input ml-input--error">
<input type="text" class="ml-input__input" placeholder="Placeholder">
<div class="ml-input__clear" data-input-clear></div>
</div>
Input Label
Поле для ввода с названием
Для нормального состояния:
<div class="ml-input">
<label class="ml-input__label">Label</label>
<input type="text" class="ml-input__input" placeholder="Placeholder">
</div>
Для состояния некорректного ввода:
<div class="ml-input ml-input--error">
<label class="ml-input__label">Label</label>
<input type="text" class="ml-input__input" placeholder="Placeholder">
<div class="ml-input__clear" data-input-clear></div>
</div>
Input Label Message
Поле для ввода с названием и проверкой на корректность ввода
Для нормального состояния:
<div class="ml-input ml-input--ok">
<label class="ml-input__label">Label</label>
<input type="text" class="ml-input__input" placeholder="Placeholder">
</div>
Для состояния некорректного ввода:
<div class="ml-input ml-input--error">
<label class="ml-input__label">Label</label>
<input type="text" class="ml-input__input" placeholder="Placeholder">
<div class="ml-input__clear" data-input-clear></div>
<span class="ml-input__message">Error message</span>
</div>
Big input
Поле с названием для ввода большого объема данных
<div class="ml-input">
<label class="ml-input__label">Label</label>
<textarea placeholder="Placeholder" class="ml-input__input"></textarea>
</div>
Расширенные настройки
класс модификатор ml-input--error включает состояние ошибки
класс модификатор ml-input--ok включает состояние успеха
npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-input] (https://www.npmjs.com/package/@megalabs/ml-input)
Для установки пакета
- nnpm i @megalabs/ml-input
- затем в папке @megalabs/ml-input запускаем npm install
- npm start