diff --git a/README.md b/README.md index bf34122..a398f79 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ ## version ~ 0.2.6 +Читать на русском README + 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. @@ -67,20 +69,13 @@ const dropdown = new CGSelect({ ## Example of different selects -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/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) +View live example Built-in themes are also available: dark, white. To apply them, specify the theme attribute in the select settings and pass one of the values ​​into it dark or white. 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. -**To view it, follow the link -** https://cg-select.itguild.info/up_/documentation/index.html - -**Russian version README -** https://github.com/apuc/cg-select/blob/main/READMERU.md +Documentation ## Contributing diff --git a/READMERU.md b/READMERU.md index 2c9eef3..a70d1b1 100644 --- a/READMERU.md +++ b/READMERU.md @@ -2,6 +2,8 @@ ## version ~ 0.2.6 +Вернуться к английской версии README + Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select. Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое. @@ -68,16 +70,11 @@ const dropdown = new CGSelect({ ## Примеры различных вариантов выбора. -Рабочий пример -- 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/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 находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в CGSelect. Вы также можете открыть его на странице с примером, или перейти по ссылке ниже. -**Для просмотра перейдите по ссылке -** https://cg-select.itguild.info/up_/documentation/index.html +Документация ## Contributing diff --git a/docs/index.html b/docs/index.html index f02e8f1..54878d5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -150,15 +150,9 @@

Example of different selects

- Same working example -- + View live example https://cg-select.itguild.info/

-

- image - image - image - image -

Built-in themes are also available: dark, white. To apply them, specify the theme attribute in the select settings and pass one of the values ​​into it dark or white. diff --git a/src/components/theme/theme.interface.ts b/src/components/theme/theme.interface.ts index 6e77742..ba8395d 100644 --- a/src/components/theme/theme.interface.ts +++ b/src/components/theme/theme.interface.ts @@ -19,7 +19,6 @@ export interface CustomThemeJson { placeholder?: object; caret?: object; search?: object; - chips?: object; lable?: object; }; } diff --git a/src/components/theme/theme.ts b/src/components/theme/theme.ts index 25dc473..af8833e 100644 --- a/src/components/theme/theme.ts +++ b/src/components/theme/theme.ts @@ -7,7 +7,7 @@ export function changeTheme(element: Element, theme: string | CustomTheme | Cust const list = element!.querySelector('ul.list'); const search = element!.querySelector('.inputSearch'); const placeholder = element!.querySelector('.selected'); - // const chips = element!.querySelector('.multiselect-tag'); + const lable = document.querySelector('.label'); const path = element.querySelectorAll('.pathWhite'); const nativeSelect = element.querySelector('.nativeSelect'); @@ -52,18 +52,16 @@ export function changeTheme(element: Element, theme: string | CustomTheme | Cust let customThemeHead = theme.styles.head! as object; let customThemeList = theme.styles.list! as object; let customThemeCaret = theme.styles.caret! as object; - let customThemeChips = theme.styles.chips! as object; let customThemePl = theme.styles.placeholder! as object; let customThemeSearch = theme.styles.search! as object; - // let customThemeLable = theme.styles.lable! as object; + let customThemeLable = theme.styles.lable! as object; customStylesFormat(customThemeHead, select!); customStylesFormat(customThemeList, list!); customStylesFormat(customThemeCaret, caret!); - // customStylesFormat(customThemeChips, select!); customStylesFormat(customThemePl, placeholder!); customStylesFormat(customThemeSearch, search!); - // customStylesFormat(customThemeLable, select!); + customStylesFormat(customThemeLable, lable!); } else { select!.classList.add(`${theme.styles.head}`); list!.classList.add(`${theme.styles.list}`); diff --git a/test/index.js b/test/index.js index c8ed33d..179600b 100644 --- a/test/index.js +++ b/test/index.js @@ -4,6 +4,7 @@ import { newTheme } from './test'; const dropdown = new CGSelect({ selector: '.cg-dropdown_selector', placeholder: 'Выберите авто', + label: 'HI', items: [ 'BMW', { @@ -15,6 +16,7 @@ const dropdown = new CGSelect({ 'MAN', 'Ferari', ], + searchMode: true, multiselect: true, multiselectTag: true, theme: newTheme, diff --git a/test/test.ts b/test/test.ts index 363c610..32975d1 100644 --- a/test/test.ts +++ b/test/test.ts @@ -8,5 +8,22 @@ export const newTheme: CustomThemeJson = { fontSize: '18px', background: '#ff000066', }, + lable: { + color: 'black', + fontSize: '26px', + }, + list: { + background: 'black', + color: 'red', + }, + placeholder: { + color: 'green', + }, + caret: { + borderTop: '6px solid #607ab1', + }, + search: { + background: 'red', + }, }, };