Inishial example page
This commit is contained in:
MaxOvs19
commit
4ceedfc9b5
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.parcel-cache
|
||||||
270
example.scss
Normal file
270
example.scss
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
// @import '/src/main.scss';
|
||||||
|
@import './src/constructor/constructor.scss';
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testClass {
|
||||||
|
background-color: #8297ff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listTest {
|
||||||
|
background-color: #8297ff;
|
||||||
|
border: 1px solid black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-example {
|
||||||
|
background: #000000c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 900px;
|
||||||
|
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
-webkit-box-align: baseline;
|
||||||
|
-ms-flex-align: baseline;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #2a2f3b;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 57px;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Times New Roman', Times, serif;
|
||||||
|
margin: 40px 0 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logoBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
width: 13%;
|
||||||
|
height: 16%;
|
||||||
|
border: 1px solid #525252;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
margin: 22px 0 0 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navlist {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 15px 0 30px 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 230px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-ms-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-select {
|
||||||
|
width: 100%;
|
||||||
|
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;
|
||||||
|
padding: 20px 0 0 40px;
|
||||||
|
margin: 0 0 30px 0;
|
||||||
|
background-color: #2a2f3b;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_submit {
|
||||||
|
text-align: center;
|
||||||
|
width: 200px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin: 20px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
-moz-transition: 1s;
|
||||||
|
-ms-transition: 1s;
|
||||||
|
-o-transition: 1s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #d7d7d7;
|
||||||
|
transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
-moz-transition: 1s;
|
||||||
|
-ms-transition: 1s;
|
||||||
|
-o-transition: 1s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-select {
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
text-align: center;
|
||||||
|
width: 200px;
|
||||||
|
height: 35px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 20px 15px;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.container {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: 15px;
|
||||||
|
h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-select_title {
|
||||||
|
font-size: 14px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.version {
|
||||||
|
position: absolute;
|
||||||
|
color: white;
|
||||||
|
font-size: 10px;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
530
index.html
Normal file
530
index.html
Normal file
@ -0,0 +1,530 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
|
||||||
|
/>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="cg-select" />
|
||||||
|
<meta property="og:url" content="https://cg-select.itguild.info" />
|
||||||
|
<!-- <meta property="og:image" content="/src/images/logoCG.jpg" /> -->
|
||||||
|
|
||||||
|
<title>Cg-Select</title>
|
||||||
|
<!-- <link rel="shortcut icon" href="../src/images/logoCG2.ico" type="image/x-icon" /> -->
|
||||||
|
<link href="example.scss" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body class="body-example">
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<div class="header__logoBox">
|
||||||
|
<h1>CG-SELECT</h1>
|
||||||
|
<!-- <img src="/src/images/logoCG.jpg" alt="#" class="header__logo" /> -->
|
||||||
|
</div>
|
||||||
|
<hr style="width: 55%" />
|
||||||
|
<nav>
|
||||||
|
<ul class="navlist">
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<!-- <li><a href="/docs/index.html">Documentation</a></li> -->
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<p class="version">v. 0.2.4</p>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container content">
|
||||||
|
<div class="example-select">
|
||||||
|
<h2 class="example-select_title">Default select</h2>
|
||||||
|
<form method="get" class="form">
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_one"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="submit" value="Отправить!" class="example-select_submit" />
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="first">View code</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">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__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'Ferari',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h2 class="example-select_title">Default select with function nativeSelectMode</h2>
|
||||||
|
|
||||||
|
<form method="get" class="form">
|
||||||
|
<p style="margin-left: 12px; color: white">
|
||||||
|
*Native select appears on mobile resolution.
|
||||||
|
</p>
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_selectNative"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="Native">View code</button>
|
||||||
|
<code id="codeNative">
|
||||||
|
<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>
|
||||||
|
nativeSelectMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
<span class="code__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'Ferari',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h2 class="example-select_title">Default select with function listDisplayMode</h2>
|
||||||
|
|
||||||
|
<form method="get" class="form">
|
||||||
|
<p style="margin-left: 12px; color: white">
|
||||||
|
*When using this method, the selection sheet appears as a modal window.
|
||||||
|
</p>
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="six">View code</button>
|
||||||
|
|
||||||
|
<code id="codeSix">
|
||||||
|
<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_listDisplayMode',</span>
|
||||||
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
|
listDisplayMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
<span class="code__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'Ferari',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Select with data from URL</h1>
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_three"></button>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="check-code" id="second">View code</button>
|
||||||
|
|
||||||
|
<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">CGSelect</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_three',</span>
|
||||||
|
placeholder: <span class="code__string">'URL',</span>
|
||||||
|
url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span>
|
||||||
|
searchMode: <span class="code__keyword">true,</span>
|
||||||
|
darkTheme: <span class="code__keyword">false,</span>
|
||||||
|
language: <span class="code__string">'ru',</span>
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</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">'headTestClass',</span>
|
||||||
|
list: <span class="code__string">'listTestClass',</span> ,
|
||||||
|
placeholder: <span class="code__string">'placeholderTestClass',</span> ,
|
||||||
|
caret: <span class="code__string">'caretTestClass',</span> ,
|
||||||
|
search: <span class="code__string">'searchTestClass',</span> ,
|
||||||
|
chips: <span class="code__string">'chipsTestClass',</span> ,
|
||||||
|
lable: <span class="code__string">'lableTestClass',</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">'headTestClass',</span>
|
||||||
|
list: <span class="code__string">'listTestClass',</span> ,
|
||||||
|
placeholder: <span class="code__string">'placeholderTestClass',</span> ,
|
||||||
|
caret: <span class="code__string">'caretTestClass',</span> ,
|
||||||
|
search: <span class="code__string">'searchTestClass',</span> ,
|
||||||
|
chips: <span class="code__string">'chipsTestClass',</span> ,
|
||||||
|
lable: <span class="code__string">'lableTestClass',</span> ,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<h6>CSS</h6>
|
||||||
|
<code style="display: block; width: 44%">
|
||||||
|
<pre>
|
||||||
|
.headTestClass {
|
||||||
|
background-color: #8297ff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listTestClass {
|
||||||
|
background-color: #8297ff;
|
||||||
|
border: 1px solid black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
|
||||||
|
<h6>Example custom theme in CG-Select</h6>
|
||||||
|
<p>
|
||||||
|
See an example of a select on
|
||||||
|
<a
|
||||||
|
href="https://codesandbox.io/p/sandbox/cg-select-example-eq9rle?file=%2Fsrc%2Findex.js"
|
||||||
|
style="font-size: 16px; color: #88d0f7"
|
||||||
|
>codesandbox.io</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<div class="layout-select" style="margin-bottom: 60px">
|
||||||
|
<button class="cg-dropdown cg-dropdown_theme"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Select constructor</h1>
|
||||||
|
<div class="row" style="margin: 20px; color: white">
|
||||||
|
<div class="col">
|
||||||
|
<h5 style="font-size: 18px; margin: 0;">Select Style Builder:</h5>
|
||||||
|
<p style="margin-right: 50px; font-size: 17px">
|
||||||
|
This is a constructor for styling a select online without downloading. For it to work,
|
||||||
|
you need to:
|
||||||
|
<ol style="font-size: 15px;">
|
||||||
|
<li class="liList">Select a part of the select for customization. </li>
|
||||||
|
<li class="liList">Enter styles in the text field in the form "color: red;".</li>
|
||||||
|
<li class="liList">Click on the render button.</li>
|
||||||
|
</ol>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="layout-select constructor">
|
||||||
|
<button class="cg-dropdown body"></button>
|
||||||
|
<textarea
|
||||||
|
name="styles"
|
||||||
|
id="styles"
|
||||||
|
cols="30"
|
||||||
|
rows="5"
|
||||||
|
class="textareaStyle"
|
||||||
|
placeholder="Enter CSS properties"
|
||||||
|
disabled="disabled"
|
||||||
|
></textarea>
|
||||||
|
<button type="button" class="check-code render">Render</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="layout-select constructor" style="margin-bottom: 60px;">
|
||||||
|
<button class="cg-dropdown select"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Categories</h1>
|
||||||
|
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_categories"></button>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="check-code" id="third">View code</button>
|
||||||
|
|
||||||
|
<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">CGSelect</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_categories',</span>
|
||||||
|
placeholder: <span class="code__string">'Выберите регион',</span>
|
||||||
|
searchMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
category: <span class="code__string">'Russia',</span>
|
||||||
|
categoryItems: [
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'28qwds',</span>
|
||||||
|
title: <span class="code__string">'Москва',</span>
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Ростов-на-дону',</span>
|
||||||
|
<span class="code__string">'Саратов',</span>
|
||||||
|
<span class="code__string">'Волгоград',</span>
|
||||||
|
<span class="code__string">'Донецк',</span>
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: <span class="code__string">'USA',</span>
|
||||||
|
categoryItems: <span class="code__string">[
|
||||||
|
'Alabama',
|
||||||
|
'Texas',
|
||||||
|
'Colorado',
|
||||||
|
'Klirens',
|
||||||
|
'Los-Angeles'],</span>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: <span class="code__string">'France',</span>
|
||||||
|
categoryItems: <span class="code__string">['Paris'],</span>
|
||||||
|
},
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
maxWidth: <span class="code__string">'500px ',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: <span class="code__keyword">true,</span>
|
||||||
|
multiselectTag: <span class="code__keyword">true,</span>
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Button control</h1>
|
||||||
|
<div style="margin-bottom: 15px">
|
||||||
|
<button class="button__open example-select_submit">Open</button>
|
||||||
|
<button class="button__close example-select_submit">Close</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_usedBtn"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="fourth">View code</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">CGSelect</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
|
||||||
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
|
searchMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
<span class="code__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'max',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
color: <span class="code__string">'black',</span>
|
||||||
|
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
color: <span class="code__string">'black',</span>
|
||||||
|
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
|
||||||
|
},
|
||||||
|
caret: {
|
||||||
|
borderTop: <span class="code__string">'6px solid black',</span>
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
backgroundColor: <span class="code__string">'#d7ffff',</span>
|
||||||
|
borderRadius: <span class="code__string">'5px',</span>
|
||||||
|
borderBottom: <span class="code__string">'none',</span>
|
||||||
|
width: <span class="code__string">'95%',</span>
|
||||||
|
color: <span class="code__string">'black',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: <span class="code__keyword">true,</span>
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Function disabled</h1>
|
||||||
|
|
||||||
|
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
|
||||||
|
<label for="checkboxDisable" style="color: white">
|
||||||
|
You agree to the processing of data</label
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="fifth">View code</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">CGSelect</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
|
||||||
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
|
searchMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
<span class="code__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'Ferari',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
maxWidth: <span class="code__string">'500px ',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: <span class="code__keyword">true,</span>
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script type="module" src="index.js"></script>
|
||||||
|
</html>
|
||||||
265
index.js
Normal file
265
index.js
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
import CGSelect from 'cg-select';
|
||||||
|
// import { newCustomTheme } from './src/themeTest';
|
||||||
|
|
||||||
|
import './src/example';
|
||||||
|
import './src/constructor/constructor';
|
||||||
|
|
||||||
|
// ------------------------------Обычный селект--------------------
|
||||||
|
const dropdown = new CGSelect({
|
||||||
|
selector: '.cg-dropdown_one',
|
||||||
|
placeholder: 'Choose a car',
|
||||||
|
label: 'EXAMPLE',
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'Ferari',
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// dropdown.on('clear', function (e) {
|
||||||
|
// console.log(`this state: ${e}`);
|
||||||
|
// });
|
||||||
|
|
||||||
|
const droptheme = new CGSelect({
|
||||||
|
selector: '.cg-dropdown_theme',
|
||||||
|
placeholder: 'Choose a car',
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'Ferari',
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
theme: 'dark',
|
||||||
|
});
|
||||||
|
// ------------------------------NativeSelect-----------------------
|
||||||
|
const dropdownNativeSelect = new CGSelect({
|
||||||
|
selector: '.cg-dropdown_selectNative',
|
||||||
|
placeholder: 'Choose a car',
|
||||||
|
nativeSelectMode: true,
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'Ferari',
|
||||||
|
'Kamaz',
|
||||||
|
'Ural',
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
theme: 'dark',
|
||||||
|
});
|
||||||
|
|
||||||
|
// ------------------------------listDisplayMode--------------------
|
||||||
|
const dropdownlistDisplayMode = new CGSelect({
|
||||||
|
selector: '.cg-dropdown_listDisplayMode',
|
||||||
|
placeholder: 'Choose a car',
|
||||||
|
listDisplayMode: true,
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'Ferari',
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// --------------------------------Категории--------------------------
|
||||||
|
const dropdown4 = new CGSelect({
|
||||||
|
selector: '.cg-dropdown_categories',
|
||||||
|
placeholder: 'Choose region',
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
|
||||||
|
//----------------управление с помощью кнопок----------------------------------
|
||||||
|
const dropdownBtn = new CGSelect({
|
||||||
|
selector: '.cg-dropdown_usedBtn',
|
||||||
|
placeholder: 'Choose a car',
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
|
||||||
|
const buttonOpen = document.querySelector('.button__open');
|
||||||
|
const buttonClose = document.querySelector('.button__close');
|
||||||
|
|
||||||
|
dropdownBtn.buttonControl(buttonOpen, 'open');
|
||||||
|
dropdownBtn.buttonControl(buttonClose, 'close');
|
||||||
|
|
||||||
|
//-------------------------Функция Disabled----------------------------------
|
||||||
|
const dropdownDisabled = new CGSelect({
|
||||||
|
selector: '.cg-dropdown_checkboxDisable',
|
||||||
|
placeholder: 'Choose a car',
|
||||||
|
searchMode: true,
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'max',
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
maxWidth: '500px ',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: true,
|
||||||
|
});
|
||||||
|
dropdownDisabled.disabled(true);
|
||||||
|
let chbox = document.getElementById('checkboxDisable');
|
||||||
|
|
||||||
|
chbox.addEventListener('click', () => {
|
||||||
|
if (chbox.checked == true) {
|
||||||
|
dropdownDisabled.disabled(false);
|
||||||
|
} else {
|
||||||
|
dropdownDisabled.disabled(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ------------------------------URL--------------------
|
||||||
|
const dropdown3 = new CGSelect({
|
||||||
|
selector: '.cg-dropdown_three',
|
||||||
|
placeholder: 'URL',
|
||||||
|
url: 'https://jsonplaceholder.typicode.com/todos',
|
||||||
|
searchMode: true,
|
||||||
|
darkTheme: false,
|
||||||
|
language: 'ru',
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: true,
|
||||||
|
});
|
||||||
6221
package-lock.json
generated
Normal file
6221
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
Normal file
33
package.json
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"name": "example-cg-select-page",
|
||||||
|
"version": "0.2.5",
|
||||||
|
"description": "This is a test page to demonstrate the capabilities of the select",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"start": "parcel index.html -p 4500 --open",
|
||||||
|
"build": "parcel build"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/MaxOvs19/Example-CG-SELECT.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"exemple-cg-select"
|
||||||
|
],
|
||||||
|
"author": "MaxOvs19",
|
||||||
|
"license": "ISC",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/MaxOvs19/Example-CG-SELECT/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/MaxOvs19/Example-CG-SELECT#readme",
|
||||||
|
"dependencies": {
|
||||||
|
"cg": "^0.5.0",
|
||||||
|
"cg-select": "^0.2.4",
|
||||||
|
"parcel": "^2.8.3",
|
||||||
|
"select": "^1.1.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@parcel/transformer-sass": "^2.8.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
83
src/constructor/constructor.js
Normal file
83
src/constructor/constructor.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
import CGSelect from 'cg-select';
|
||||||
|
|
||||||
|
const body = new CGSelect({
|
||||||
|
selector: '.body',
|
||||||
|
placeholder: 'Select element to style',
|
||||||
|
items: ['head', 'list', 'placeholder', 'caret', 'search'],
|
||||||
|
});
|
||||||
|
|
||||||
|
let head = '';
|
||||||
|
let list = '';
|
||||||
|
let placeholder = '';
|
||||||
|
let caret = '';
|
||||||
|
let valueSelect = '';
|
||||||
|
|
||||||
|
const textarea = document.querySelector('#styles');
|
||||||
|
const renderBtn = document.querySelector('.render');
|
||||||
|
|
||||||
|
body.on('select', (e, value) => {
|
||||||
|
valueSelect = value;
|
||||||
|
textarea.value = '';
|
||||||
|
textarea.removeAttribute('disabled');
|
||||||
|
getValueSelect(valueSelect);
|
||||||
|
});
|
||||||
|
|
||||||
|
function getValueSelect(value) {
|
||||||
|
textarea.onkeyup = function () {
|
||||||
|
switch (value) {
|
||||||
|
case 'head':
|
||||||
|
// ввод стилей
|
||||||
|
head = textarea.value;
|
||||||
|
break;
|
||||||
|
case 'list':
|
||||||
|
list = textarea.value;
|
||||||
|
break;
|
||||||
|
case 'placeholder':
|
||||||
|
placeholder = textarea.value;
|
||||||
|
break;
|
||||||
|
case 'caret':
|
||||||
|
caret = textarea.value;
|
||||||
|
break;
|
||||||
|
case 'search':
|
||||||
|
search = textarea.value;
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
renderBtn.addEventListener('click', () => {
|
||||||
|
const select = new CGSelect({
|
||||||
|
selector: '.select',
|
||||||
|
placeholder: 'Choose a car',
|
||||||
|
label: 'Exemple select',
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'Ferari',
|
||||||
|
],
|
||||||
|
searchMode: true,
|
||||||
|
multiselect: true,
|
||||||
|
multiselectTag: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const drop = document.querySelector('.select');
|
||||||
|
let headSelect = drop.querySelector('.cg-select');
|
||||||
|
let listSelect = drop.querySelector('.list');
|
||||||
|
let placeholderSelect = drop.querySelector('.selected');
|
||||||
|
let caretSelect = drop.querySelector('.caret');
|
||||||
|
let searchSelect = drop.querySelector('.inputSearch');
|
||||||
|
headSelect.setAttribute('style', head);
|
||||||
|
listSelect.setAttribute('style', list);
|
||||||
|
placeholderSelect.setAttribute('style', placeholder);
|
||||||
|
caretSelect.setAttribute('style', caret);
|
||||||
|
searchSelect.setAttribute('style', search);
|
||||||
|
});
|
||||||
16
src/constructor/constructor.scss
Normal file
16
src/constructor/constructor.scss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.textareaStyle {
|
||||||
|
resize: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.constructor {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liList {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
48
src/example.js
Normal file
48
src/example.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
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');
|
||||||
|
|
||||||
|
const six = document.getElementById('six');
|
||||||
|
const codeSix = document.getElementById('codeSix');
|
||||||
|
|
||||||
|
const Native = document.getElementById('Native');
|
||||||
|
const codeNative = document.getElementById('codeNative');
|
||||||
|
|
||||||
|
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');
|
||||||
|
});
|
||||||
|
|
||||||
|
six.addEventListener('click', () => {
|
||||||
|
codeSix.classList.toggle('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
Native.addEventListener('click', () => {
|
||||||
|
codeNative.classList.toggle('active');
|
||||||
|
});
|
||||||
9
src/themeTest.ts
Normal file
9
src/themeTest.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// import { CustomTheme } from 'components/theme/theme.interface';
|
||||||
|
|
||||||
|
// export const newCustomTheme: CustomTheme = {
|
||||||
|
// name: 'test',
|
||||||
|
// styles: {
|
||||||
|
// head: 'testClass',
|
||||||
|
// list: 'listTest',
|
||||||
|
// },
|
||||||
|
// };
|
||||||
Loading…
Reference in New Issue
Block a user