CG-SELECT

version ~ 0.2.4

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

Возможность настройки основных элементов, таких как:

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

Installation

npm i cg-select

Usage

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

Создайте обычную кнопку.
Добавьте ей класс cg-dropdown.

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

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

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

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

Все варианты создания и управления селектом есть в документации, раздел "Конструктор класса CGSelect".

Пример создания обычного CGSelect.

import CGSelect from 'cg-select';

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

Примеры различных вариантов выбора.

Рабочий пример -- https://cg-select.itguild.info/

Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в CGSelect. Вы также можете открыть его на странице с примером, или перейти по ссылке ниже.

Для просмотра перейдите по ссылке - https://cg-select.itguild.info/up_/documentation/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

Compatibility

Application Compatibility	JS	React	Angular	Vue
CG-SELECT
Comment	Tested in Js applications and it worksуспешно.	Works only with a crutch in the form `setTimeout()`	not yet available	not yet available

History

16.12.2022 - release version 0.1.0!

20.01.2023 - upgrade to version 0.2.1

5.0 KiB Raw Blame History Unescape Escape