- 
-
- CG-SELECT
-
- - -
This component allows you to create a custom select. It offers more flexible diff --git a/example/example.js b/example/example.js deleted file mode 100644 index f807677..0000000 --- a/example/example.js +++ /dev/null @@ -1,50 +0,0 @@ -const firstBtn = document.getElementById('first'); -const codeFirst = document.getElementById('codeFirst'); - -const secondBtn = document.getElementById('second'); -const codeSecond = document.getElementById('codeSecond'); - -const thirdBtn = document.getElementById('third'); -const codeThird = document.getElementById('codeThird'); - -const fourthBtn = document.getElementById('fourth'); -const codeFourth = document.getElementById('codeFourth'); - -const fifthBtn = document.getElementById('fifth'); -const codeFifth = document.getElementById('codeFifth'); - -const six = document.getElementById('six') -const codeSix = document.getElementById('codeSix'); - - -const Native = document.getElementById('Native') -const codeNative = document.getElementById('codeNative') - - -firstBtn.addEventListener('click', () => { - codeFirst.classList.toggle("active") -}) - -secondBtn.addEventListener('click', () => { - codeSecond.classList.toggle("active") -}) - -thirdBtn.addEventListener('click', () => { - codeThird.classList.toggle("active") -}) - -fourthBtn.addEventListener('click', () => { - codeFourth.classList.toggle("active") -}) - -fifthBtn.addEventListener('click', () => { - codeFifth.classList.toggle("active") -}) - -six.addEventListener('click', () => { - codeSix.classList.toggle("active") -}) - -Native.addEventListener('click', () => { - codeNative.classList.toggle("active") -}) \ No newline at end of file diff --git a/example/index.html b/example/index.html deleted file mode 100644 index b316ee7..0000000 --- a/example/index.html +++ /dev/null @@ -1,363 +0,0 @@ - - -
- - - - - - - - - -
-
-
- const dropdown = new CGSelect({
- selector: '.cg-dropdown_three',
- placeholder: 'URL',
- url: 'https://jsonplaceholder.typicode.com/users',
- searchMode: true,
- darkTheme: false,
- language: 'ru',
- styles: {
- head: {
- width: '830px',
- },
- list: {
- width: '824px',
- },
- },
- });
-
-
-
-
- const dropdown = new CGSelect({
- selector: '.cg-dropdown_categories',
- placeholder: 'Выберите регион',
- searchMode: true,
- items: [
- {
- category: 'Russia',
- categoryItems: [
- {
- id: '28qwds',
- title: 'Москва',
- value: 0,
- },
- 'Ростов-на-дону',
- 'Саратов',
- 'Волгоград',
- 'Донецк',
- ],
- },
- {
- category: 'USA',
- categoryItems: [
- 'Alabama',
- 'Texas',
- 'Colorado',
- 'Klirens',
- 'Los-Angeles'],
- },
- {
- category: 'France',
- categoryItems: ['Paris'],
- },
- ],
- styles: {
- head: {
- width: '830px',
- },
- list: {
- width: '824px',
- },
- placeholder: {
- maxWidth: '500px ',
- },
- },
- multiselect: true,
- multiselectTag: true,
- });
-
-
-
-
- const dropdown = new CGSelect({
- selector: '.cg-dropdown_usedBtn',
- placeholder: 'Choose a car',
- searchMode: true,
- items: [
- 'BMW',
- {
- id: '213sade',
- title: 'Opel',
- value: 1,
- },
- 'Mersedes',
- 'MAN',
- 'max',
- ],
- styles: {
- head: {
- width: '830px',
- color: 'black',
- backgroundColor: 'rgb(176 223 167)',
- },
- list: {
- width: '824px',
- color: 'black',
- backgroundColor: 'rgb(176 223 167)',
- },
- caret: {
- borderTop: '6px solid black',
- },
- search: {
- backgroundColor: '#d7ffff',
- borderRadius: '5px',
- borderBottom: 'none',
- width: '95%',
- color: 'black',
- },
- },
- multiselect: true,
- });
-
-
-
-
- const dropdown = new CGSelect({
- selector: '.cg-dropdown_checkboxDisable',
- placeholder: 'Choose a car',
- searchMode: true,
- items: [
- 'BMW',
- {
- id: '213sade',
- title: 'Opel',
- value: 1,
- },
- 'Mersedes',
- 'MAN',
- 'Ferari',
- ],
- styles: {
- head: {
- width: '830px',
- },
- list: {
- width: '824px',
- },
- placeholder: {
- maxWidth: '500px ',
- },
- },
- multiselect: true,
- });
-
-
-