From 4561d50fa071f2b96c33be8c1f9110a9728b31f0 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Mon, 19 Dec 2022 21:15:47 +0300 Subject: [PATCH 1/3] Fixing layout in exemple page --- src/index.html | 30 ++++++++++++++++++++++++++++++ src/style/ExemplePage.scss | 22 +++++++++++++++++++--- src/style/main.scss | 2 +- 3 files changed, 50 insertions(+), 4 deletions(-) diff --git a/src/index.html b/src/index.html index d5d45f0..dca770f 100644 --- a/src/index.html +++ b/src/index.html @@ -33,6 +33,36 @@ + + + 
+              const dropdown = new DropDown({
+                selector: '.cg-dropdown_one',
+                placeholder: 'Выберите авто',
+                lable: 'EXAMPLE',
+                items: [
+                  'BMW',
+                  {
+                    id: '213sade',
+                    title: 'Opel',
+                    value: 1,
+                  },
+                  'Mersedes',
+                  'MAN',
+                  'Ferari',
+                ],
+                styles: {
+                  head: {
+                    width: '830px',
+                  },
+                  list: {
+                    width: '824px',
+                  },
+                },
+              });
+
+ + diff --git a/src/style/ExemplePage.scss b/src/style/ExemplePage.scss index 94b5af5..b12e816 100644 --- a/src/style/ExemplePage.scss +++ b/src/style/ExemplePage.scss @@ -56,22 +56,32 @@ .content { margin-top: 15px; - background-color: #6b6d76; + // 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; + background-color: #5c5c5c; + border-radius: 5px; + margin: 15px 0 0 0; + //padding: 0 13px 13px 13px; &_title { + height: 45px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; color: white; - text-align: center; + padding: 20px 0 0 40px; + margin: 0 0 30px 0; + background-color: #2a2f3b; font-size: 20px; } + &_submit { width: 200px; height: 35px; @@ -95,3 +105,9 @@ } } } + + + +pre{ + +} diff --git a/src/style/main.scss b/src/style/main.scss index cf366fa..b921b86 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -10,7 +10,7 @@ } body { - background: #c5c5c6; + background: #000000c4; } .container { From 5c0f244eb12f9787951fd3d5f3a69e495fae497a Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Mon, 19 Dec 2022 22:48:05 +0300 Subject: [PATCH 2/3] Added code example --- src/index.html | 194 +++++++++++++++++++++++++++++++++---- src/index.js | 3 - src/style/ExemplePage.scss | 44 ++++++++- 3 files changed, 214 insertions(+), 27 deletions(-) diff --git a/src/index.html b/src/index.html index dca770f..110e62f 100644 --- a/src/index.html +++ b/src/index.html @@ -26,9 +26,9 @@
+

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

-
-

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

+
@@ -36,44 +36,117 @@ 
-              const dropdown = new DropDown({
-                selector: '.cg-dropdown_one',
-                placeholder: 'Выберите авто',
-                lable: 'EXAMPLE',
+              const dropdown = new DropDown({
+                selector: '.cg-dropdown_one', 
+                placeholder: 'Выберите авто', 
+                lable: 'EXAMPLE', 
+                span.code__string 
                 items: [
-                  'BMW',
+                  'BMW',
                   {
-                    id: '213sade',
-                    title: 'Opel',
+                    id: '213sade',
+                    title: 'Opel',
                     value: 1,
                   },
-                  'Mersedes',
-                  'MAN',
-                  'Ferari',
+                  'Mersedes', 
+                  'MAN',  
+                  'Ferari', 
                 ],
                 styles: {
                   head: {
-                    width: '830px',
+                    width: '830px', 
                   },
                   list: {
-                    width: '824px',
+                    width: '824px', 
                   },
                 },
               });
-

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

- +
+ +
+ + + 
+            const dropdown = new DropDown({
+              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 DropDown({
+              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,
+            });
+
+
@@ -82,7 +155,54 @@
- + +
+ +
+ + + 
+            const dropdown = new DropDown({
+              selector: '.cg-dropdown_usedBtn', 
+              placeholder: 'Выберите авто', 
+              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,
+            });
+
+
@@ -90,7 +210,43 @@ - + +
+ +
+ + + 
+            const dropdown = new DropDown({
+              selector: '.cg-dropdown_checkboxDisable', 
+              placeholder: 'Выберите авто', 
+              lable: 'EXAMPLE', 
+              span.code__string 
+              items: [
+                'BMW',
+                {
+                  id: '213sade',
+                  title: 'Opel',
+                  value: 1,
+                },
+                'Mersedes', 
+                'MAN',  
+                'Ferari', 
+              ],
+              styles: {
+                head: {
+                  width: '830px', 
+                },
+                list: {
+                  width: '824px', 
+                },
+                placeholder: {
+                  maxWidth: '500px ',
+                },
+              },
+            });
+
+
diff --git a/src/index.js b/src/index.js index d6e950b..6b3eb2a 100644 --- a/src/index.js +++ b/src/index.js @@ -49,8 +49,6 @@ const dropdown3 = new DropDown({ width: '824px', }, }, - // multiselect: true, - // multiselectTag: true, }); // --------------------------------Категории-------------------------- @@ -103,7 +101,6 @@ const dropdownBtn = new DropDown({ selector: '.cg-dropdown_usedBtn', placeholder: 'Выберите авто', searchMode: true, - items: [ 'BMW', { diff --git a/src/style/ExemplePage.scss b/src/style/ExemplePage.scss index b12e816..21dd3ef 100644 --- a/src/style/ExemplePage.scss +++ b/src/style/ExemplePage.scss @@ -69,7 +69,6 @@ background-color: #5c5c5c; border-radius: 5px; margin: 15px 0 0 0; - //padding: 0 13px 13px 13px; &_title { height: 45px; @@ -83,11 +82,13 @@ } &_submit { + //background-color: #2a2f3b; width: 200px; height: 35px; border-radius: 10px; border: none; margin-top: 20px; + margin: 20px 15px; cursor: pointer; transition: 1s; -webkit-transition: 1s; @@ -104,10 +105,43 @@ -o-transition: 1s; } } + + .layout-select { + margin: 15px; + } } - - -pre{ - +pre { + background: #1e1e1e; + margin: 15px; + padding: 15px; + color: #88d0f7; + border-radius: 15px; + font-size: 16px; + line-height: 20px; +} + +.code { + &__class, + &__var, + &__string, + &__keyword { + font-size: 16px; + line-height: 20px; + } + &__class { + color: #4ec9b0; + } + + &__var { + color: #34a7ff; + } + + &__string { + color: #ce9178; + } + + &__keyword { + color: #5090ca; + } } From adbf8237bb10c8d5588eda64ab12cec9a214293a Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 20 Dec 2022 14:46:57 +0300 Subject: [PATCH 3/3] Finish page exemple --- src/exemple-page.js | 34 ++++++++++++++++++++++++++++++++++ src/index.html | 20 ++++++++++++-------- src/index.js | 1 + src/style/ExemplePage.scss | 18 ++++++++++++++++++ 4 files changed, 65 insertions(+), 8 deletions(-) create mode 100644 src/exemple-page.js diff --git a/src/exemple-page.js b/src/exemple-page.js new file mode 100644 index 0000000..98c3da0 --- /dev/null +++ b/src/exemple-page.js @@ -0,0 +1,34 @@ +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'); + +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") +}) diff --git a/src/index.html b/src/index.html index 110e62f..bba2dec 100644 --- a/src/index.html +++ b/src/index.html @@ -34,13 +34,13 @@ - + + 
               const dropdown = new DropDown({
                 selector: '.cg-dropdown_one', 
                 placeholder: 'Выберите авто', 
                 lable: 'EXAMPLE', 
-                span.code__string 
                 items: [
                   'BMW',
                   {
@@ -71,8 +71,9 @@
         

           
         

+        
 
-        
+        
           
             const dropdown = new DropDown({
               selector: '.cg-dropdown_three', 
@@ -100,8 +101,9 @@
         

           
         

+        
 
-        
+        
           
             const dropdown = new DropDown({
               selector: '.cg-dropdown_categories', 
@@ -160,7 +162,9 @@
           
         
 
-        
+        
+
+        
           
             const dropdown = new DropDown({
               selector: '.cg-dropdown_usedBtn', 
@@ -208,20 +212,20 @@
       

         
Функция disabled

 
-        
+        
         
 
         

           
         

 
-        
+        
+        
           
             const dropdown = new DropDown({
               selector: '.cg-dropdown_checkboxDisable', 
               placeholder: 'Выберите авто', 
               lable: 'EXAMPLE', 
-              span.code__string 
               items: [
                 'BMW',
                 {
diff --git a/src/index.js b/src/index.js
index 6b3eb2a..e956073 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 import { DropDown } from './cg-dropdown';
+import './exemple-page';
 
 // ------------------------------Обычный селект--------------------
 const dropdown = new DropDown({
diff --git a/src/style/ExemplePage.scss b/src/style/ExemplePage.scss
index 21dd3ef..f1b815f 100644
--- a/src/style/ExemplePage.scss
+++ b/src/style/ExemplePage.scss
@@ -111,6 +111,10 @@
   }
 }
 
+code {
+  display: none;
+}
+
 pre {
   background: #1e1e1e;
   margin: 15px;
@@ -145,3 +149,17 @@ pre {
     color: #5090ca;
   }
 }
+
+.check-code {
+  width: 200px;
+  height: 35px;
+  cursor: pointer;
+  border: none;
+  border-radius: 10px;
+  margin: 20px 15px;
+  transition: all 1s;
+}
+
+.active {
+  display: block;
+}