Added page for example
This commit is contained in:
parent
b444dd53aa
commit
358c206c61
BIN
src/images/logoCG.jpg
Normal file
BIN
src/images/logoCG.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@ -9,36 +9,47 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1>CG-SELECT</h1>
|
||||
<img src="images/logoCG.jpg" alt="#" class="header__logo" />
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="container content">
|
||||
<div class="example-select">
|
||||
<form method="get" class="form">
|
||||
<div>
|
||||
<h1>Дефолтный селект</h1>
|
||||
<h2 class="example-select_title">Дефолтный селект</h2>
|
||||
<button class="cg-dropdown cg-dropdown_one"></button>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Отправить!" />
|
||||
<input type="submit" value="Отправить!" class="example-select_submit" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Селект с данными с URL</h1>
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Селект с данными с URL</h1>
|
||||
<button class="cg-dropdown cg-dropdown_three"></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Селект с категориями</h1>
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Категории</h1>
|
||||
<button class="cg-dropdown cg-dropdown_categories"></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Cелект управляемый кнопками</h1>
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Управление с помошью кнопок</h1>
|
||||
<div style="margin-bottom: 15px">
|
||||
<button class="button__open example-select_submit">Open</button>
|
||||
<button class="button__close example-select_submit">Close</button>
|
||||
</div>
|
||||
<button class="cg-dropdown cg-dropdown_usedBtn"></button>
|
||||
<button class="button__open">Open</button>
|
||||
<button class="button__close">Close</button>
|
||||
</div>
|
||||
|
||||
<div style="width: 300px">
|
||||
<h1>Cелект с функцией disabled</h1>
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Функция disabled</h1>
|
||||
|
||||
<input type="checkbox" name="chbx" id="checkboxDisable" />
|
||||
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin-bottom: 16px" />
|
||||
<label for="checkboxDisable">Вы согласны на обработку данных</label>
|
||||
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
|
||||
</div>
|
||||
|
||||
86
src/index.js
86
src/index.js
@ -4,10 +4,8 @@ import { DropDown } from './cg-dropdown';
|
||||
const dropdown = new DropDown({
|
||||
selector: '.cg-dropdown_one',
|
||||
placeholder: 'Выберите авто',
|
||||
lable: 'Выбор лучшего авто!',
|
||||
darkTheme: false,
|
||||
searchMode: true,
|
||||
closeOnSelect: false,
|
||||
lable: 'EXAMPLE',
|
||||
|
||||
items: [
|
||||
'BMW',
|
||||
{
|
||||
@ -18,26 +16,23 @@ const dropdown = new DropDown({
|
||||
'Mersedes',
|
||||
'MAN',
|
||||
'Ferari',
|
||||
'Ferari',
|
||||
'Ferari',
|
||||
],
|
||||
styles: {
|
||||
lable: {
|
||||
fontSize: '14px',
|
||||
border: '1px white solid',
|
||||
borderRadius: '5px',
|
||||
head: {
|
||||
width: '830px',
|
||||
},
|
||||
list: {
|
||||
width: '824px',
|
||||
},
|
||||
},
|
||||
// multiselect: true,
|
||||
// multiselectTag: true,
|
||||
});
|
||||
|
||||
const ger = {
|
||||
placeholder: 'searcH????',
|
||||
textInListSearch: 'None',
|
||||
};
|
||||
// const ger = {
|
||||
// placeholder: 'searcH????',
|
||||
// textInListSearch: 'None',
|
||||
// };
|
||||
|
||||
dropdown.addLenguage(ger);
|
||||
// dropdown.addLenguage(ger);
|
||||
|
||||
// ------------------------------URL--------------------
|
||||
const dropdown3 = new DropDown({
|
||||
@ -45,11 +40,14 @@ const dropdown3 = new DropDown({
|
||||
placeholder: 'URL',
|
||||
url: 'http://jsonplaceholder.typicode.com/users',
|
||||
searchMode: true,
|
||||
darkTheme: false,
|
||||
lenguage: 'ru',
|
||||
styles: {
|
||||
head: {
|
||||
background: 'black',
|
||||
width: '350px',
|
||||
width: '830px',
|
||||
},
|
||||
list: {
|
||||
width: '824px',
|
||||
},
|
||||
},
|
||||
// multiselect: true,
|
||||
@ -86,17 +84,17 @@ const dropdown4 = new DropDown({
|
||||
categoryItems: ['Paris'],
|
||||
},
|
||||
],
|
||||
// styles: {
|
||||
// head: {
|
||||
// background: 'red',
|
||||
// },
|
||||
// list: {
|
||||
// background: 'green',
|
||||
// },
|
||||
// chips: {
|
||||
// background: 'blue',
|
||||
// },
|
||||
// },
|
||||
styles: {
|
||||
head: {
|
||||
width: '830px',
|
||||
},
|
||||
list: {
|
||||
width: '824px',
|
||||
},
|
||||
placeholder: {
|
||||
maxWidth: '500px ',
|
||||
},
|
||||
},
|
||||
multiselect: true,
|
||||
multiselectTag: true,
|
||||
});
|
||||
@ -106,7 +104,7 @@ const dropdownBtn = new DropDown({
|
||||
selector: '.cg-dropdown_usedBtn',
|
||||
placeholder: 'Выберите авто',
|
||||
searchMode: true,
|
||||
darkTheme: true,
|
||||
|
||||
items: [
|
||||
'BMW',
|
||||
{
|
||||
@ -118,6 +116,21 @@ const dropdownBtn = new DropDown({
|
||||
'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',
|
||||
},
|
||||
},
|
||||
multiselect: true,
|
||||
});
|
||||
|
||||
@ -143,6 +156,17 @@ const dropdownDisabled = new DropDown({
|
||||
'MAN',
|
||||
'max',
|
||||
],
|
||||
styles: {
|
||||
head: {
|
||||
width: '830px',
|
||||
},
|
||||
list: {
|
||||
width: '824px',
|
||||
},
|
||||
placeholder: {
|
||||
maxWidth: '500px ',
|
||||
},
|
||||
},
|
||||
multiselect: true,
|
||||
});
|
||||
dropdownDisabled.disabled(true);
|
||||
|
||||
65
src/style/ExemplePage.scss
Normal file
65
src/style/ExemplePage.scss
Normal file
@ -0,0 +1,65 @@
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2a2f3b;
|
||||
margin-bottom: 8px;
|
||||
|
||||
h1 {
|
||||
font-size: 57px;
|
||||
color: white;
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 11%;
|
||||
margin-left: 25px;
|
||||
border-radius: 60px;
|
||||
border: 1px solid #525252;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 15px;
|
||||
background-color: #6b6d76;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
}
|
||||
.example-select {
|
||||
width: 100%;
|
||||
margin: 25px;
|
||||
|
||||
&_title {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
&_submit {
|
||||
width: 200px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
transition: 1s;
|
||||
-webkit-transition: 1s;
|
||||
-moz-transition: 1s;
|
||||
-ms-transition: 1s;
|
||||
-o-transition: 1s;
|
||||
|
||||
&:hover {
|
||||
background-color: #d7d7d7;
|
||||
transition: 1s;
|
||||
-webkit-transition: 1s;
|
||||
-moz-transition: 1s;
|
||||
-ms-transition: 1s;
|
||||
-o-transition: 1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
@import './scrolbar.scss';
|
||||
@import './whiteTheme.scss';
|
||||
@import './svgStyle.scss';
|
||||
@import './ExemplePage.scss';
|
||||
|
||||
* {
|
||||
font-size: 14px;
|
||||
@ -9,7 +10,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background: #4a4a4a;
|
||||
background: #c5c5c6;
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -202,6 +203,7 @@ body {
|
||||
.inputSearch {
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: 90%;
|
||||
border-bottom: 1px solid white;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user