Finished working
This commit is contained in:
MaxOvs19
parent
2d4d774931
commit
c635e838c8
13
README.md
13
README.md
@ -2,6 +2,8 @@
|
||||
|
||||
## version ~ 0.2.6
|
||||
|
||||
<a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">Читать на русском README</a>
|
||||
|
||||
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/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://cg-select.itguild.info/">View live example</a>
|
||||
|
||||
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
|
||||
<a href="https://cg-select.itguild.info/up_/documentation/index.html">Documentation</a>
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
11
READMERU.md
11
READMERU.md
@ -2,6 +2,8 @@
|
||||
|
||||
## version ~ 0.2.6
|
||||
|
||||
<a href="https://github.com/apuc/cg-select/blob/main/README.md">Вернуться к английской версии README</a>
|
||||
|
||||
Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
|
||||
Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
|
||||
|
||||
@ -68,16 +70,11 @@ const dropdown = new CGSelect({
|
||||
|
||||
## Примеры различных вариантов выбора.
|
||||
|
||||
Рабочий пример -- https://cg-select.itguild.info/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://cg-select.itguild.info/">Рабочий пример</a>
|
||||
|
||||
Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в CGSelect. Вы также можете открыть его на странице с примером, или перейти по ссылке ниже.
|
||||
|
||||
**Для просмотра перейдите по ссылке -** https://cg-select.itguild.info/up_/documentation/index.html
|
||||
<a href="https://cg-select.itguild.info/up_/documentation/index.html">Документация</a>
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
@ -150,15 +150,9 @@
|
||||
<h2>Example of different selects</h2>
|
||||
</a>
|
||||
<p>
|
||||
Same working example --
|
||||
View live example
|
||||
<a href="https://cg-select.itguild.info/">https://cg-select.itguild.info/</a>
|
||||
</p>
|
||||
<p>
|
||||
<img src="../src/images/DefaultSelect.png" alt="image" />
|
||||
<img src="../src/images/MultiSelect.png" alt="image" />
|
||||
<img src="../src/images/WhiteTheme.png" alt="image" />
|
||||
<img src="../src/images/Categories.png" alt="image" />
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
|
||||
@ -19,7 +19,6 @@ export interface CustomThemeJson {
|
||||
placeholder?: object;
|
||||
caret?: object;
|
||||
search?: object;
|
||||
chips?: object;
|
||||
lable?: object;
|
||||
};
|
||||
}
|
||||
|
||||
@ -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}`);
|
||||
|
||||
@ -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,
|
||||
|
||||
17
test/test.ts
17
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',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user