From 44fb2b6e5ab1f641d55a1caa3a50fafefe154821 Mon Sep 17 00:00:00 2001 From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com> Date: Wed, 9 Nov 2022 15:35:15 +0300 Subject: [PATCH 1/2] Update README.md --- README.md | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 60 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ffd3a4e..93a5889 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,69 @@ # CG-SELECT -This component allows you to create a generic custom select. Customization, multiselect, search by select elements are available. +Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. +Доступна кастомизация, мультивыбор и живой поиск по елементам. + +### Доступна возможность кастомизации основных элементов, таких как: +* Кнопка селекта. +* Список c элементами селекта. +* Placeholder. +* При режиме мультиселект доступна кастомизация chips(выбранных эл-ов). +* Label элемента(если он был указан) +* Переключение тем с темной на светлую + ## Installation TODO: Describe the installation process ## Usage -All documentation on the select is located in the folder of the same name. The documentation describes all the methods and variables, there are also examples of passing settings to the select. To view it, run the index.html file from the documentation folder. +### Для создания компонета нужно: + +1. Создать обычный button елемент. +2. Присвоить ему класс cg-dropdown. +``` + +``` +3. Присвоить ему **уникальный класс**, например(cg-dropdown_categories) +``` + +``` +4. Создать новый экземпляр класса(new DropDown) +5. Передать все желаемые настройки как объект + +#### Все опции для создания и управления находятся в документации, раздел "Конструктор класса DropDown". + +### Пример создния обычного селекта + +```javascript +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', + ], + +}); + +``` + +#### Примеры разных селектов + +![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) + +Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Чтобы просмотреть его, откройте файл index.html в браузере из папки с документацией. + ## Contributing 1. Fork it! 2. Create your feature branch: `git checkout -b my-new-feature` From 9e13858cea246027c40deabb89f860411566e721 Mon Sep 17 00:00:00 2001 From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com> Date: Wed, 9 Nov 2022 15:37:42 +0300 Subject: [PATCH 2/2] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 93a5889..3b65c13 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ -# CG-SELECT +# CG-SELECT +## version ~1.0.0 + Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Доступна кастомизация, мультивыбор и живой поиск по елементам.