Компоненты
Кастомный селект
В данной реализации используется нативный селект, что решает массу проблем, которые были с инпутом.
Базовая структура селекта — это div в который вложен "лейбл", сообщение об ошибке, кнопка в которую вложен span под текст и span под иконку и список с элементами для выбора. Это базовая структура которая обязательна для соблюдению, исключением являются поля с лейблом, плейсхолдером и ошибкой! Всё остальное формируется на js.
<div class="select" data-select>
<span class="select__label">label-1</span>
<span class="select__error">some-error</span>
<span class="select__placeholder">some-placeholder</span>
<button class="select__button" type="button" aria-label="Выберите одну из опций">
<span class="select__text"></span>
<span class="select__icon"></span>
</button>
<ul class="select__list">
<li class="select__item" tabindex="0" data-select-value="id-1">example-1</li>
<li class="select__item" tabindex="0" data-select-value="id-2">example-2</li>
<li class="select__item" tabindex="0" data-select-value="id-3">example-3</li>
<li class="select__item" tabindex="0" data-select-value="id-4">example-4</li>
<li class="select__item" tabindex="0" data-select-value="id-5">example-5</li>
<li class="select__item" tabindex="0" data-select-value="id-6">example-6</li>
</ul>
</div>
Для того что бы селект был не активен, если используется миксин нужно передать параметр disabled: true, если используется html то на кнопку достаточно повесить атрибут disabled
Дополнительные data атрибуты которые прописываются непосредственно в родительском div:
|
data-name="name-example" |
Устанавливает name нативному селекту |
|---|---|
|
data-id="id-example" |
Устанавливает id нативному селекту |
|
data-required="true" |
Устанавливает обязательное заполнение данного поля формы |
|
data-multiple="true" |
Устанавливает multiple выбор селекту |
|
data-insert="true" |
Отвечает за вставку выбранных опций в кнопку |
Если нужно что бы один из пунктов был выбран по умолчанию достаточно просто добавить класс active к классу select__item class="select__item active". Для мультиселекта можно выбирать любое количество пунктов. Если в обычном селекте по ошибке будет выбранно несколько пунктов то все классы active будут удалены со всех элементов кроме первого.
Если селект расположен в самом низу страницы или в низу модального окна повести на родителя класс "open-up". С этим классом селект будет открываться на верх. Реализовыать расчёт положения на js, не имеет смысла, так как селект может находится и в модалке, класс у которой может быть любой, как следствие проблемы с нахождением родителя относительно которого нужно расчитывать положение.
Инициализация
В main.js импортируйте import './modules/select';
Для повторной инициализации при динамическом добавлении без перезагрузки страницы нужно вызывать функцию window.selectInit(); Инициализироваться будут только новые селекты.
Дополнительные data атрибуты которые прописываются на элементе списка:
|
data-select-value="id-1" |
Устанавливает value опции нативного селекта |
|---|