From 358c206c613729088396d5da98514efb6ed43260 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Fri, 11 Nov 2022 17:21:42 +0300 Subject: [PATCH] Added page for example --- src/images/logoCG.jpg | Bin 0 -> 18396 bytes src/index.html | 47 ++++++++++++-------- src/index.js | 86 ++++++++++++++++++++++++------------- src/style/ExemplePage.scss | 65 ++++++++++++++++++++++++++++ src/style/main.scss | 4 +- 5 files changed, 152 insertions(+), 50 deletions(-) create mode 100644 src/images/logoCG.jpg create mode 100644 src/style/ExemplePage.scss diff --git a/src/images/logoCG.jpg b/src/images/logoCG.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e1a43c81c78c83e0b09b0fe6ec9d5ca630d5efe4 GIT binary patch literal 18396 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 YO{WTCOj;
-
-
-

Дефолтный селект

- -
+
+

CG-SELECT

+ +
+
- - +
+
+
+
+

Дефолтный селект

+ +
-
-

Селект с данными с URL

+ + +
+ +
+

Селект с данными с URL

-
-

Селект с категориями

+
+

Категории

-
-

Cелект управляемый кнопками

+
+

Управление с помошью кнопок

+
+ + +
- -
-
-

Cелект с функцией disabled

+
+

Функция disabled

- +
diff --git a/src/index.js b/src/index.js index 5c11cf8..1a6d21a 100644 --- a/src/index.js +++ b/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); diff --git a/src/style/ExemplePage.scss b/src/style/ExemplePage.scss new file mode 100644 index 0000000..587de21 --- /dev/null +++ b/src/style/ExemplePage.scss @@ -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; + } + } +} diff --git a/src/style/main.scss b/src/style/main.scss index b09c917..f396441 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -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;