apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finish page exemple

Browse Source
This commit is contained in:
MaxOvs 2022-12-20 14:46:57 +03:00
parent 5c0f244eb1
commit adbf8237bb
4 changed files with 65 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/exemple-page.js Normal file
View File

@ -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")
})

20
src/index.html
View File

@ -34,13 +34,13 @@
<input type="submit" value="Отправить!" class="example-select_submit" />
<code>
<button type="button" class="check-code" id="first">Посмотреть код</button>
<code id="codeFirst">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
lable: <span class="code__string">'EXAMPLE',</span>
span.code__string
items: [
<span class="code__string">'BMW',</span>
{
@ -71,8 +71,9 @@
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_three"></button>
</div>
<button type="button" class="check-code" id="second">Посмотреть код</button>
<code>
<code id="codeSecond">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_three',</span>
@ -100,8 +101,9 @@
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_categories"></button>
</div>
<button type="button" class="check-code" id="third">Посмотреть код</button>
<code>
<code id="codeThird">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_categories',</span>
@ -160,7 +162,9 @@
<button class="cg-dropdown cg-dropdown_usedBtn"></button>
</div>
<code>
<button type="button" class="check-code" id="fourth">Посмотреть код</button>
<code id="codeFourth">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
@ -208,20 +212,20 @@
<div class="example-select">
<h1 class="example-select_title">Функция disabled</h1>
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin-bottom: 16px" />
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
<label for="checkboxDisable">Вы согласны на обработку данных</label>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
</div>
<code>
<button type="button" class="check-code" id="fifth">Посмотреть код</button>
<code id="codeFifth">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
lable: <span class="code__string">'EXAMPLE',</span>
span.code__string
items: [
<span class="code__string">'BMW',</span>
{

1
src/index.js
View File

@ -1,4 +1,5 @@
import { DropDown } from './cg-dropdown';
import './exemple-page';
// ------------------------------Обычный селект--------------------
const dropdown = new DropDown({

18
src/style/ExemplePage.scss
View File

@ -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;
}