apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed Readme

Browse Source
This commit is contained in:
Макс Овсяников 2023-01-19 19:41:04 +03:00
parent 15f6c19650
commit 718b67e891
2 changed files with 42 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
CHANGELOG.md
View File

@ -1,27 +1,27 @@
# CG-SELECT # CG-SELECT
### 16.12.2022 - релиз версии 0.1.0! ### 16.12.2022 - release version 0.1.0!
### 20.12.2022 - обновление 0.1.12. ### 20.12.2022 - update 0.1.12.
Проведены тесты в JS и React. Выявленны ошибки в работе в Реакт приложениях. Tested in JS and React. Errors in work in React applications are revealed.
- Изменена файловая структура приложения. - Changed the file structure of the application.
### 22.12.2022 - обновление 0.1.14. ### 22.12.2022 - update 0.1.14.
- Изменеия в расположении файлов scss. - Changes in the location of the scss files.
- Исправлено влияние стилей селекта на JS приложение. - Fixed influence of select styles on JS application.
### 29.12.2022 - обновление 0.1.17 ### 29.12.2022 - update 0.1.17
- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select). - Added ability to change select display on phones (native/cg-select).
- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно). - Added the ability to change the display of the sheet with a choice (normal / modal window).
- Исправленны выявленные баги. - Fixed identified bugs.
- Исправленно отображение страницы с примером на мобильных устройствах. - Fixed display of the example page on mobile devices.
- Обновленна документация! - Updated documentation!
### 00.00.2023 - обновление 0.2.1 ### 00.00.2023 - update 0.2.1
- Весь селект переписан на ts. - All select rewritten to ts.
- Исправленны баги и недочеты. - Fixed bugs and shortcomings.

49
README.md
View File

@ -2,17 +2,17 @@
## version ~ 0.2.1 ## version ~ 0.2.1
Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. This component allows you to create a custom select. It offers more flexible customization and use of select.
Доступна кастомизация, мультивыбор и живой поиск по елементам. Customization, multi-selection and live search by elements are available.
### Доступна возможность кастомизации основных элементов, таких как: ### The ability to customize basic elements, such as:
- Кнопка селекта. - Select button.
- Список c элементами селекта. - List with select elements.
- Placeholder. - Placeholder.
- При режиме мультиселект доступна кастомизация chips(выбранных эл-ов). - In the multiselect mode, customization of chips (selected elements) is available.
- Label элемента(если он был указан) - Label of the element (if it was specified).
- Переключение тем с темной на светлую - Switch themes from dark to light.
## Installation ## Installation
@ -22,27 +22,27 @@ npm i cg-select
## Usage ## Usage
### Для создания компонета нужно: ### To create a component, you need:
1. Создать обычный button елемент. 1. Create a regular button element.
2. Присвоить ему класс cg-dropdown. 2. Give it the cg-dropdown class.
``` ```
<button class="cg-dropdown"></button> <button class="cg-dropdown"></button>
``` ```
3. Присвоить ему **уникальный класс**, например(cg-dropdown_categories) 3. Give it a **unique class**, e.g. (cg-dropdown_categories).
``` ```
<button class="cg-dropdown cg-dropdown_categories"></button> <button class="cg-dropdown cg-dropdown_categories"></button>
``` ```
4. Создать новый экземпляр класса(new DropDown) 4. Create a new instance of the class (new CGSelect)
5. Передать все желаемые настройки как объект 5. Pass all desired settings as an object
#### Все опции для создания и управления находятся в документации, раздел "Конструктор класса DropDown". #### All options for creating and managing are in the documentation, section "CGSelect class constructor".
### Пример создния обычного селекта ### An example of creating a regular select.
```javascript ```javascript
import { CGSelect } from 'cg-select'; import { CGSelect } from 'cg-select';
@ -64,18 +64,18 @@ const dropdown = new CGSelect({
}); });
``` ```
## Пример разных селектов ## Example of different selects
Так же рабочий пример -- https://cg-select.itguild.info/ Same working example -- https://cg-select.itguild.info/
![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png) ![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/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/WhiteTheme.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Так же её можно открыть на странице с примером, или перейти по ссылке ниже. All documentation on CG-SELECT is located in the folder of the same name. The documentation describes all methods and variables, there are also examples of passing settings to select. You can also open it on the page with an example, or follow the link below.
**Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/documentation/index.html **To view it, follow the link -** https://cg-select.itguild.info/up_/documentation/index.html
## Contributing ## Contributing
@ -87,11 +87,12 @@ const dropdown = new CGSelect({
## Compatibility ## Compatibility
| Совместимость с приложениями | JS | React | Angular | Vue | | Application Compatibility | JS | React | Angular | Vue |
| ---------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | | ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | | CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
| Комментарий | Протестирован в Js приложениях и работает успешно. | Работает только с костылем в виде `setTimeout()` | пока недоступно | тесты не проведены | | Comment | Tested in Js applications and it worksуспешно. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available |
## History ## History
16.12.2022 - релиз версии 0.1.0! 16.12.2022 - release version 0.1.0!
00.00.2023 - upgrade to version 0.2.1