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