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

Sort scss classes and index.js.

Browse Source
This commit is contained in:
Макс Овсяников 2022-10-14 16:36:12 +03:00
parent 0fcb6c9926
commit 58e24dc19a
3 changed files with 43 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.html
View File

@ -11,16 +11,10 @@
<div class="container">
<button class="cg-dropdown cg-dropdown_one"></button>
<button class="cg-dropdown cg-dropdown_two"></button>
<button class="cg-dropdown cg-dropdown_three"></button>
<button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
</div>
<!-- <div class="buttonControlBox">
<button class="buttonControl button__open">Open</button>
<button class="buttonControl button__close">Close</button>
</div> -->
</body>
<script type="module" src="index.js"></script>
</html>

104
src/index.js
View File

@ -1,74 +1,30 @@
import { DropDown } from './cg-dropdown';
// const dropdown = new DropDown({
// selector: '.cg-dropdown_one',
// placeholder: 'Выберите авто',
// items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
// ------------------------------Обычный селект--------------------
const dropdown = new DropDown({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
multiselect: true,
multiselectTag: true,
});
// multiselect: true,
// multiselectTag: true,
// });
// // dropdown.addItem('ZAZ');
// dropdown.addItem('LADA');
// dropdown.addItem('Kamaz 258');
// // dropdown.addItem('BMW');
// // const dropdown2 = new DropDown({
// // selector: '.cg-dropdown_two',
// // placeholder: 'SELECT CAR',
// // items: [
// // {
// // id: 'addaw21',
// // title: 'BMW',
// // value: 1,
// // },
// // {
// // id: '2414q',
// // title: 'Opel',
// // value: 2,
// // },
// // {
// // id: '24qwds',
// // title: 'Kamaz 258',
// // value: 3,
// // },
// // {
// // id: '28wds',
// // title: 'MAN',
// // value: 4,
// // },
// // {
// // id: '28qwds',
// // title: 'BOOT',
// // value: 5,
// // },
// // ],
// // multiselect: true,
// // event: 'mouseenter',
// // // multiselectTag: true,
// // });
// dropdown.disabled(false);
// dropdown2.addItem('LADA');
// //ToDo: paste the desired url;
// const dropdown3 = new DropDown({
// selector: '.cg-dropdown_three',
// placeholder: 'URL',
// url: 'http://jsonplaceholder.typicode.com/users',
// styles: {
// head: {
// background: 'black',
// width: '350px',
// },
// },
// multiselect: true,
// multiselectTag: true,
// });
// ------------------------------URL--------------------
const dropdown3 = new DropDown({
selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'http://jsonplaceholder.typicode.com/users',
styles: {
head: {
background: 'black',
width: '350px',
},
},
multiselect: true,
multiselectTag: true,
});
// --------------------------------Категории--------------------------
const dropdown4 = new DropDown({
selector: '.cg-dropdown_button',
placeholder: 'Выберите регион',
@ -102,12 +58,10 @@ const dropdown4 = new DropDown({
multiselectTag: true,
});
// dropdown4.addItem('Харьков');
// dropdown4.deleteItemAll();
// dropdown4.selectIndex(5);
//----------------управление с помощью кнопок----------------------------------
/* const buttonOpen = document.querySelector('.button__open');
const buttonClose = document.querySelector('.button__close');
// const buttonOpen = document.querySelector('.button__open');
// const buttonClose = document.querySelector('.button__close');
// dropdown4.buttonControl(buttonOpen, 'open');
// dropdown4.buttonControl(buttonClose, 'close');
dropdown4.buttonControl(buttonOpen, 'open');
dropdown4.buttonControl(buttonClose, 'close');
*/

34
src/style/main.scss
View File

@ -16,11 +16,7 @@ body {
width: 900px;
}
.content {
border: 1px solid #616161;
height: 500px;
}
// ----Layout----
.cg-dropdown {
min-width: 235px;
margin-left: 0;
@ -59,12 +55,6 @@ body {
}
}
.overflow-hidden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.caret {
width: 0;
height: 0;
@ -161,6 +151,7 @@ input[type='checkbox'] {
margin: 0 5px 0 0;
}
// --------SVG--------
.svg-icon {
width: 16px;
margin-left: 3px;
@ -182,6 +173,7 @@ input[type='checkbox'] {
stroke-width: 0.5;
}
//-------Behavior--------
.active {
background: #8282822c;
}
@ -196,6 +188,17 @@ input[type='checkbox'] {
}
}
.disabled {
background-color: #8f9195 !important;
}
.overflow-hidden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// ------SCROLLBAR------
::-webkit-scrollbar {
width: 10px;
}
@ -207,12 +210,3 @@ input[type='checkbox'] {
::-webkit-scrollbar-thumb {
background-color: #4d4d4d;
}
.disabled {
background-color: #8f9195 !important;
}
.buttonControlBox {
margin: -25px auto 0 auto;
width: 300px;
}