5.0 KiB
5.0 KiB
CG-SELECT
version ~ 0.2.1
Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Доступна кастомизация, мультивыбор и живой поиск по елементам.
Доступна возможность кастомизации основных элементов, таких как:
- Кнопка селекта.
- Список c элементами селекта.
- Placeholder.
- При режиме мультиселект доступна кастомизация chips(выбранных эл-ов).
- Label элемента(если он был указан)
- Переключение тем с темной на светлую
Installation
npm i cg-select
Usage
Для создания компонета нужно:
- Создать обычный button елемент.
- Присвоить ему класс cg-dropdown.
<button class="cg-dropdown"></button>
- Присвоить ему уникальный класс, например(cg-dropdown_categories)
<button class="cg-dropdown cg-dropdown_categories"></button>
- Создать новый экземпляр класса(new DropDown)
- Передать все желаемые настройки как объект
Все опции для создания и управления находятся в документации, раздел "Конструктор класса DropDown".
Пример создния обычного селекта
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 находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Так же её можно открыть на странице с примером, или перейти по ссылке ниже.
Чтобы ознакомиться с ней, перейдите по ссылке - 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
History
16.12.2022 - релиз версии 0.1.0!