Create block in decription themes
This commit is contained in:
MaxOvs19
parent
fd8fc093d0
commit
2cd1920eb5
@ -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")
|
||||
})
|
||||
codeNative.classList.toggle('active');
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -192,6 +192,115 @@
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="example-select description-theme">
|
||||
<h1 class="example-select_title">Setting up and adding a theme.</h1>
|
||||
|
||||
<div class="layout-select">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5>Default theme:</h5>
|
||||
<p style="margin-right: 50px">
|
||||
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.
|
||||
</p>
|
||||
<code style="display: block; margin-top: 32px">
|
||||
<pre>
|
||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</span>
|
||||
lable: <span class="code__string">'EXAMPLE',</span>
|
||||
items: [
|
||||
...
|
||||
],
|
||||
<span class="code__keyword">theme</span>: <span class="code__string">'dark / white'</span>
|
||||
});
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h5>Create custom theme:</h5>
|
||||
<div class="createTheme">
|
||||
<p style="margin-right: 25px">
|
||||
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.
|
||||
</p>
|
||||
<code style="display: block">
|
||||
<pre>
|
||||
<span class="code__keyword">interface</span> <span class="code__var">CustomTheme</span> {
|
||||
name: <span class="code__class">'string',</span>
|
||||
styles: {
|
||||
head?: <span class="code__class">'string',</span>
|
||||
list?: <span class="code__class">'testClass',</span> ,
|
||||
placeholder?: <span class="code__class">'string',</span> ,
|
||||
caret?: <span class="code__class">'string',</span> ,
|
||||
search?: <span class="code__class">'string',</span> ,
|
||||
chips?: <span class="code__class">'string',</span> ,
|
||||
lable?: <span class="code__class">'string',</span> ,
|
||||
},
|
||||
});
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 style="margin: 20px 0 5px; text-align: center">Example:</h5>
|
||||
|
||||
<div class="row">
|
||||
<h6>For JS</h6>
|
||||
<h6>For TS</h6>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<code style="display: block">
|
||||
<pre>
|
||||
<span class="code__keyword">const</span> <span class="code__var">newTheme</span> = {
|
||||
name: <span class="code__string">'test',</span>
|
||||
styles: {
|
||||
head: <span class="code__string">'testClass',</span>
|
||||
list: <span class="code__string">'testClass',</span> ,
|
||||
placeholder: <span class="code__string">'testClass',</span> ,
|
||||
caret: <span class="code__string">'testClass',</span> ,
|
||||
search: <span class="code__string">'testClass',</span> ,
|
||||
chips: <span class="code__string">'testClass',</span> ,
|
||||
lable: <span class="code__string">'testClass',</span> ,
|
||||
},
|
||||
});
|
||||
</pre>
|
||||
</code>
|
||||
|
||||
<code style="display: block">
|
||||
<pre>
|
||||
<span class="code__keyword">const</span> <span class="code__var">newCustomTheme</span>:<span class="code__class"> CustomTheme</span> = {
|
||||
name: <span class="code__string">'test',</span>
|
||||
styles: {
|
||||
head: <span class="code__string">'testClass',</span>
|
||||
list: <span class="code__string">'testClass',</span> ,
|
||||
placeholder: <span class="code__string">'testClass',</span> ,
|
||||
caret: <span class="code__string">'testClass',</span> ,
|
||||
search: <span class="code__string">'testClass',</span> ,
|
||||
chips: <span class="code__string">'testClass',</span> ,
|
||||
lable: <span class="code__string">'testClass',</span> ,
|
||||
},
|
||||
});
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
<h6>CSS</h6>
|
||||
<code style="display: block; width: 44%">
|
||||
<pre>
|
||||
.testClass {
|
||||
background-color: #ff8282;
|
||||
color: white;
|
||||
}
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Categories</h1>
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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',
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user