diff --git a/package.json b/package.json index 09f2584..034e89f 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "", "scripts": { "start": "parcel src/index.html -p 4500 --open ", - "build": "parcel build ./src/index.html --public-url /cg-select/", + "build": "parcel build ./src/index.html --public-url /", "deploy": "gh-pages -d dist", "predeploy": "npm run build" }, @@ -17,7 +17,7 @@ "bugs": { "url": "https://github.com/MaxOvs19/cg-select/issues" }, - "homepage": "https://maxovs19.github.io/cg-select/", + "homepage": "https://cg-select.itguild.info", "devDependencies": { "@parcel/transformer-sass": "^2.7.0", "parcel": "^2.7.0", 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 d5d45f0..bba2dec 100644 --- a/src/index.html +++ b/src/index.html @@ -26,24 +26,129 @@
+

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

-
-

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

+
+ + + + 
+              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', 
+                  },
+                },
+              });
+
+

Селект с данными с 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,
+            });
+
+
@@ -52,15 +157,100 @@
- + +
+ +
+ + + + + 
+            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,
+            });
+
+

Функция disabled

- + - + +
+ +
+ + + + 
+            const dropdown = new DropDown({
+              selector: '.cg-dropdown_checkboxDisable', 
+              placeholder: 'Выберите авто', 
+              lable: 'EXAMPLE', 
+              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..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({ @@ -49,8 +50,6 @@ const dropdown3 = new DropDown({ width: '824px', }, }, - // multiselect: true, - // multiselectTag: true, }); // --------------------------------Категории-------------------------- @@ -103,7 +102,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 f151d47..9d15380 100644 --- a/src/style/ExemplePage.scss +++ b/src/style/ExemplePage.scss @@ -56,7 +56,7 @@ .content { margin-top: 15px; - background-color: #6b6d76; + // background-color: #6b6d76; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; @@ -66,20 +66,28 @@ .example-select { width: 100%; - margin: 25px; + background-color: #5c5c5c; + border-radius: 5px; + margin: 15px 0 0 0; &_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 { + //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; @@ -96,4 +104,61 @@ -o-transition: 1s; } } + + .layout-select { + margin: 15px; + } +} + +code { + display: none; +} + +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; + } +} + +.check-code { + width: 200px; + height: 35px; + cursor: pointer; + border: none; + border-radius: 10px; + margin: 20px 15px; + transition: all 1s; +} + +.active { + display: block; } 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 {