2022-11-14 12:23:18 +03:00
# CG-SELECT
2022-10-13 14:11:52 +03:00
2022-11-14 12:23:18 +03:00
## version ~ 0.0.1
2022-11-09 15:37:42 +03:00
2022-11-09 15:35:15 +03:00
Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
Доступна кастомизация, мультивыбор и живой поиск по елементам.
### Доступна возможность кастомизации основных элементов, таких как:
2022-11-14 12:23:18 +03:00
- Кнопка селекта.
- Список c элементами селекта.
- Placeholder.
- При режиме мультиселект доступна кастомизация chips(выбранных эл-ов).
- Label элемента(если он был указан)
- Переключение тем с темной на светлую
2022-11-09 15:35:15 +03:00
2022-10-26 15:34:40 +03:00
## Installation
2022-11-14 12:23:18 +03:00
2022-10-26 15:34:40 +03:00
TODO: Describe the installation process
2022-11-14 12:23:18 +03:00
2022-10-26 15:34:40 +03:00
## Usage
2022-11-14 12:23:18 +03:00
2022-11-09 15:35:15 +03:00
### Для создания компонета нужно:
1. Создать обычный button елемент.
2. Присвоить ему класс cg-dropdown.
2022-11-14 12:23:18 +03:00
2022-11-09 15:35:15 +03:00
```
< button class = "cg-dropdown" > < / button >
```
2022-11-14 12:23:18 +03:00
2022-11-09 15:35:15 +03:00
3. Присвоить ему **уникальный класс** , например(cg-dropdown_categories)
2022-11-14 12:23:18 +03:00
2022-11-09 15:35:15 +03:00
```
< button class = "cg-dropdown cg-dropdown_categories" > < / button >
```
2022-11-14 12:23:18 +03:00
2022-11-09 15:35:15 +03:00
4. Создать новый экземпляр класса(new DropDown)
5. Передать все желаемые настройки как объект
#### В с е опции для создания и управления находятся в документации, раздел "Конструктор класса DropDown".
### Пример создния обычного селекта
```javascript
import { DropDown } from './cg-dropdown';
const dropdown = new DropDown({
2022-11-14 12:23:18 +03:00
selector: '.cg-dropdown_selector',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
2022-11-09 15:35:15 +03:00
});
```
2022-11-14 13:37:18 +03:00
## Пример разных селектов
2022-12-20 20:02:48 +03:00
Так же рабочий пример -- https://cg-select.itguild.info/
2022-11-09 15:35:15 +03:00
![image ](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png )
![image ](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png )
![image ](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png )
![image ](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png )
2022-11-17 21:39:26 +03:00
Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select.
2022-11-14 13:37:18 +03:00
2022-11-17 21:39:26 +03:00
**Чтобы ознакомиться с ней, перейдите по ссылке -** https://maxovs19.github.io/cg-select/up_/documentation/index.html
2022-11-09 15:35:15 +03:00
2022-10-26 15:34:40 +03:00
## Contributing
2022-11-14 12:23:18 +03:00
2022-10-26 15:34:40 +03:00
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
2022-11-14 12:23:18 +03:00
2022-10-26 15:34:40 +03:00
## History
2022-11-14 12:23:18 +03:00
2022-10-26 15:34:40 +03:00
TODO: Write history