CG-SELECT

Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Доступна кастомизация, мультивыбор и живой поиск по елементам.

Доступна возможность кастомизации основных элементов, таких как:

Кнопка селекта.
Список c элементами селекта.
Placeholder.
При режиме мультиселект доступна кастомизация chips(выбранных эл-ов).
Label элемента(если он был указан)
Переключение тем с темной на светлую

Installation

TODO: Describe the installation process

Usage

Для создания компонета нужно:

Создать обычный button елемент.
Присвоить ему класс cg-dropdown.

<button class="cg-dropdown"></button>

Присвоить ему уникальный класс, например(cg-dropdown_categories)

<button class="cg-dropdown cg-dropdown_categories"></button>

Создать новый экземпляр класса(new DropDown)
Передать все желаемые настройки как объект

Пример создния обычного селекта

import { DropDown } from './cg-dropdown';

const dropdown = new DropDown({
    selector: '.cg-dropdown_selector',
    placeholder: 'Выберите авто',
    items: [
      'BMW',
      {
        id: '213sade',
        title: 'Opel',
        value: 1,
      },
      'Mersedes',
      'MAN',
      'Ferari',
    ],

});

Примеры разных селектов

Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Чтобы просмотреть его, откройте файл index.html в браузере из папки с документацией.

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

History

TODO: Write history

3.0 KiB Raw Blame History Unescape Escape