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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<form method="get" class="form">
|
<header class="header">
|
||||||
<div>
|
<h1>CG-SELECT</h1>
|
||||||
<h1>Дефолтный селект</h1>
|
<img src="images/logoCG.jpg" alt="#" class="header__logo" />
|
||||||
<button class="cg-dropdown cg-dropdown_one"></button>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="submit" value="Отправить!" />
|
<div class="container content">
|
||||||
</form>
|
<div class="example-select">
|
||||||
|
<form method="get" class="form">
|
||||||
|
<div>
|
||||||
|
<h2 class="example-select_title">Дефолтный селект</h2>
|
||||||
|
<button class="cg-dropdown cg-dropdown_one"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<input type="submit" value="Отправить!" class="example-select_submit" />
|
||||||
<h1>Селект с данными с URL</h1>
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Селект с данными с URL</h1>
|
||||||
<button class="cg-dropdown cg-dropdown_three"></button>
|
<button class="cg-dropdown cg-dropdown_three"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="example-select">
|
||||||
<h1>Селект с категориями</h1>
|
<h1 class="example-select_title">Категории</h1>
|
||||||
<button class="cg-dropdown cg-dropdown_categories"></button>
|
<button class="cg-dropdown cg-dropdown_categories"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="example-select">
|
||||||
<h1>Cелект управляемый кнопками</h1>
|
<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="cg-dropdown cg-dropdown_usedBtn"></button>
|
||||||
<button class="button__open">Open</button>
|
|
||||||
<button class="button__close">Close</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="width: 300px">
|
<div class="example-select">
|
||||||
<h1>Cелект с функцией disabled</h1>
|
<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>
|
<label for="checkboxDisable">Вы согласны на обработку данных</label>
|
||||||
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
|
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
86
src/index.js
86
src/index.js
@ -4,10 +4,8 @@ import { DropDown } from './cg-dropdown';
|
|||||||
const dropdown = new DropDown({
|
const dropdown = new DropDown({
|
||||||
selector: '.cg-dropdown_one',
|
selector: '.cg-dropdown_one',
|
||||||
placeholder: 'Выберите авто',
|
placeholder: 'Выберите авто',
|
||||||
lable: 'Выбор лучшего авто!',
|
lable: 'EXAMPLE',
|
||||||
darkTheme: false,
|
|
||||||
searchMode: true,
|
|
||||||
closeOnSelect: false,
|
|
||||||
items: [
|
items: [
|
||||||
'BMW',
|
'BMW',
|
||||||
{
|
{
|
||||||
@ -18,26 +16,23 @@ const dropdown = new DropDown({
|
|||||||
'Mersedes',
|
'Mersedes',
|
||||||
'MAN',
|
'MAN',
|
||||||
'Ferari',
|
'Ferari',
|
||||||
'Ferari',
|
|
||||||
'Ferari',
|
|
||||||
],
|
],
|
||||||
styles: {
|
styles: {
|
||||||
lable: {
|
head: {
|
||||||
fontSize: '14px',
|
width: '830px',
|
||||||
border: '1px white solid',
|
},
|
||||||
borderRadius: '5px',
|
list: {
|
||||||
|
width: '824px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// multiselect: true,
|
|
||||||
// multiselectTag: true,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const ger = {
|
// const ger = {
|
||||||
placeholder: 'searcH????',
|
// placeholder: 'searcH????',
|
||||||
textInListSearch: 'None',
|
// textInListSearch: 'None',
|
||||||
};
|
// };
|
||||||
|
|
||||||
dropdown.addLenguage(ger);
|
// dropdown.addLenguage(ger);
|
||||||
|
|
||||||
// ------------------------------URL--------------------
|
// ------------------------------URL--------------------
|
||||||
const dropdown3 = new DropDown({
|
const dropdown3 = new DropDown({
|
||||||
@ -45,11 +40,14 @@ const dropdown3 = new DropDown({
|
|||||||
placeholder: 'URL',
|
placeholder: 'URL',
|
||||||
url: 'http://jsonplaceholder.typicode.com/users',
|
url: 'http://jsonplaceholder.typicode.com/users',
|
||||||
searchMode: true,
|
searchMode: true,
|
||||||
|
darkTheme: false,
|
||||||
lenguage: 'ru',
|
lenguage: 'ru',
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
background: 'black',
|
width: '830px',
|
||||||
width: '350px',
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// multiselect: true,
|
// multiselect: true,
|
||||||
@ -86,17 +84,17 @@ const dropdown4 = new DropDown({
|
|||||||
categoryItems: ['Paris'],
|
categoryItems: ['Paris'],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// styles: {
|
styles: {
|
||||||
// head: {
|
head: {
|
||||||
// background: 'red',
|
width: '830px',
|
||||||
// },
|
},
|
||||||
// list: {
|
list: {
|
||||||
// background: 'green',
|
width: '824px',
|
||||||
// },
|
},
|
||||||
// chips: {
|
placeholder: {
|
||||||
// background: 'blue',
|
maxWidth: '500px ',
|
||||||
// },
|
},
|
||||||
// },
|
},
|
||||||
multiselect: true,
|
multiselect: true,
|
||||||
multiselectTag: true,
|
multiselectTag: true,
|
||||||
});
|
});
|
||||||
@ -106,7 +104,7 @@ const dropdownBtn = new DropDown({
|
|||||||
selector: '.cg-dropdown_usedBtn',
|
selector: '.cg-dropdown_usedBtn',
|
||||||
placeholder: 'Выберите авто',
|
placeholder: 'Выберите авто',
|
||||||
searchMode: true,
|
searchMode: true,
|
||||||
darkTheme: true,
|
|
||||||
items: [
|
items: [
|
||||||
'BMW',
|
'BMW',
|
||||||
{
|
{
|
||||||
@ -118,6 +116,21 @@ const dropdownBtn = new DropDown({
|
|||||||
'MAN',
|
'MAN',
|
||||||
'max',
|
'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,
|
multiselect: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -143,6 +156,17 @@ const dropdownDisabled = new DropDown({
|
|||||||
'MAN',
|
'MAN',
|
||||||
'max',
|
'max',
|
||||||
],
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
maxWidth: '500px ',
|
||||||
|
},
|
||||||
|
},
|
||||||
multiselect: true,
|
multiselect: true,
|
||||||
});
|
});
|
||||||
dropdownDisabled.disabled(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 './scrolbar.scss';
|
||||||
@import './whiteTheme.scss';
|
@import './whiteTheme.scss';
|
||||||
@import './svgStyle.scss';
|
@import './svgStyle.scss';
|
||||||
|
@import './ExemplePage.scss';
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -9,7 +10,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #4a4a4a;
|
background: #c5c5c6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@ -202,6 +203,7 @@ body {
|
|||||||
.inputSearch {
|
.inputSearch {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
|
width: 90%;
|
||||||
border-bottom: 1px solid white;
|
border-bottom: 1px solid white;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user