Компоненты

Кастомный селект

Скачать компонент

В данной реализации используется нативный селект, что решает массу проблем, которые были с инпутом.

Базовая структура селекта — это 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 опции нативного селекта

Базовый селект

Базовый селект c placeholder

Выберите тему обращенияВыберите одну из опций
  • Тема 1
  • Тема 2
  • Тема 3
  • Тема 4
  • Тема 5
  • Тема 6

Базовый селект с атрибутом disabled на кнопке

Выберите одну из опцийВыберите тему обращения
  • Тема 1
  • Тема 2
  • Тема 3
  • Тема 4
  • Тема 5
  • Тема 6

Базовый селект c выбранной опцией

Выберите тему обращения
  • Тема 1
  • Тема 2
  • Тема 3
  • Тема 4
  • Тема 5
  • Тема 6

Селект с мультивыбором

Селект с мультивыбором без вставки текста в кнопку

Выберите тему обращения
  • Тема 1
  • Тема 2
  • Тема 3
  • Тема 4
  • Тема 5
  • Тема 6

Селект с мультивыбором со вставкой текста в кнопку

Выберите тему обращения
  • Тема 1
  • Тема 2
  • Тема 3
  • Тема 4
  • Тема 5
  • Тема 6

Если селект находится внизу страницы или внизу модального окна и не хватает высоты для его открытия, повесте на него класс "open-up"

Выберите тему обращения
  • Тема 1
  • Тема 2
  • Тема 3
  • Тема 4
  • Тема 5
  • Тема 6