From 2cd1920eb569c665faf0d09d7bf33e74ff4394a8 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 15 Feb 2023 19:49:17 +0300 Subject: [PATCH] Create block in decription themes --- example/example.js | 36 +++++++------- example/example.scss | 37 ++++++++++++++- example/index.html | 109 +++++++++++++++++++++++++++++++++++++++++++ example/index.js | 16 ++++++- example/themeTest.ts | 9 +++- 5 files changed, 183 insertions(+), 24 deletions(-) diff --git a/example/example.js b/example/example.js index f807677..2238b38 100644 --- a/example/example.js +++ b/example/example.js @@ -13,38 +13,36 @@ const codeFourth = document.getElementById('codeFourth'); const fifthBtn = document.getElementById('fifth'); const codeFifth = document.getElementById('codeFifth'); -const six = document.getElementById('six') +const six = document.getElementById('six'); const codeSix = document.getElementById('codeSix'); - -const Native = document.getElementById('Native') -const codeNative = document.getElementById('codeNative') - +const Native = document.getElementById('Native'); +const codeNative = document.getElementById('codeNative'); firstBtn.addEventListener('click', () => { - codeFirst.classList.toggle("active") -}) + codeFirst.classList.toggle('active'); +}); secondBtn.addEventListener('click', () => { - codeSecond.classList.toggle("active") -}) + codeSecond.classList.toggle('active'); +}); thirdBtn.addEventListener('click', () => { - codeThird.classList.toggle("active") -}) + codeThird.classList.toggle('active'); +}); fourthBtn.addEventListener('click', () => { - codeFourth.classList.toggle("active") -}) + codeFourth.classList.toggle('active'); +}); fifthBtn.addEventListener('click', () => { - codeFifth.classList.toggle("active") -}) + codeFifth.classList.toggle('active'); +}); six.addEventListener('click', () => { - codeSix.classList.toggle("active") -}) + codeSix.classList.toggle('active'); +}); Native.addEventListener('click', () => { - codeNative.classList.toggle("active") -}) \ No newline at end of file + codeNative.classList.toggle('active'); +}); diff --git a/example/example.scss b/example/example.scss index 8255b19..1a9c973 100644 --- a/example/example.scss +++ b/example/example.scss @@ -3,10 +3,12 @@ * { font-size: 14px; font-family: Arial, Helvetica, sans-serif; + text-align: justify; } -.testClassRed { +.testClass { background-color: #ff8282; + color: white; } .body-example { @@ -144,6 +146,39 @@ } } +.row { + display: flex; + justify-content: space-around; +} + +.description-theme { + color: white; + .col { + width: 54%; + } + + img { + border-radius: 15px; + } + + .createTheme { + display: flex; + flex-direction: column; + } + + h5 { + font-size: 18px; + margin: 0; + } + h6 { + font-size: 17px; + margin: 0; + } + p { + font-size: 16px; + } +} + code { display: none; } diff --git a/example/index.html b/example/index.html index b316ee7..b66e1ad 100644 --- a/example/index.html +++ b/example/index.html @@ -192,6 +192,115 @@ +
+

Setting up and adding a theme.

+ +
+
+
+
Default theme:
+

+ To change the theme of the select, you need to specify this parameter in the select + settings. The default theme is the classic theme, you can choose a white or dark + theme. +

+ + 
+                  const dropdown = new CGSelect({
+                    selector: '.cg-dropdown_one', 
+                    placeholder: 'Choose a car', 
+                    lable: 'EXAMPLE', 
+                    items: [
+                      ...
+                    ],
+                    theme:  'dark / white'
+                  });
+
+ +
+ +
+
Create custom theme:
+
+

+ To create your own theme, you need to create an object with the following fields. + In these fields you need to insert the previously created css class. After + creating the object, just pass it to the select settings. +

+ + 
+            interface CustomTheme {
+              name: 'string', 
+              styles: {
+                head?:  'string', 
+                list?: 'testClass', ,
+                placeholder?: 'string', ,
+                caret?: 'string', ,
+                search?: 'string', ,
+                chips?: 'string', ,
+                lable?: 'string', ,
+              },
+            });
+
+ +
+
+
+ +
Example:
+ +
+
For JS
+
For TS
+
+ +
+ + 
+        const newTheme = {
+          name: 'test', 
+          styles: {
+            head:  'testClass', 
+            list: 'testClass', ,
+            placeholder: 'testClass', ,
+            caret: 'testClass', ,
+            search: 'testClass', ,
+            chips: 'testClass', ,
+            lable: 'testClass', ,
+          },
+        });
+
+ + + + 
+        const newCustomTheme: CustomTheme  = {
+          name: 'test', 
+          styles: {
+            head:  'testClass', 
+            list: 'testClass', ,
+            placeholder: 'testClass', ,
+            caret: 'testClass', ,
+            search: 'testClass', ,
+            chips: 'testClass', ,
+            lable: 'testClass', ,
+          },
+        });
+
+ +
+
CSS
+ + 
+              .testClass {
+                background-color: #ff8282;
+                color: white;
+              }
+
+ +
+
+

Categories

diff --git a/example/index.js b/example/index.js index f178a7d..e5e7f59 100644 --- a/example/index.js +++ b/example/index.js @@ -1,6 +1,19 @@ import { CGSelect } from '../src/cg-select'; import './example'; -import { newCustomTheme } from './themeTest'; +// import { newCustomTheme } from './themeTest'; + +const newTheme = { + name: 'test', + styles: { + head: 'testClass', + list: 'testClass', + placeholder: 'testClass', + caret: 'testClass', + search: 'testClass', + chips: 'testClass', + lable: 'testClass', + }, +}; // ------------------------------Обычный селект-------------------- const dropdown = new CGSelect({ @@ -26,7 +39,6 @@ const dropdown = new CGSelect({ width: '824px', }, }, - theme: newCustomTheme, }); // dropdown.on('clear', function (e) { diff --git a/example/themeTest.ts b/example/themeTest.ts index b5b0487..04618e2 100644 --- a/example/themeTest.ts +++ b/example/themeTest.ts @@ -3,7 +3,12 @@ import { CustomTheme } from 'components/theme/theme.interface'; export const newCustomTheme: CustomTheme = { name: 'test', styles: { - head: 'testClassRed', - list: 'testClassRed', + head: 'testClass', + list: 'testClass', + placeholder: 'testClass', + caret: 'testClass', + search: 'testClass', + chips: 'testClass', + lable: 'testClass', }, };