Fixed pages
This commit is contained in:
MaxOvs19
parent
fa53a86810
commit
4c136507fe
264
index.html
264
index.html
@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
<title>Cg-Select</title>
|
<title>Cg-Select</title>
|
||||||
<link rel="shortcut icon" href="src/img/logoCG2.ico" type="image/x-icon" />
|
<link rel="shortcut icon" href="src/img/logoCG2.ico" type="image/x-icon" />
|
||||||
<link href="example.scss" rel="stylesheet" />
|
<link type="text/css" media="all" rel="stylesheet" href="style.scss" />
|
||||||
</head>
|
</head>
|
||||||
<body class="body-example">
|
<body class="body-example">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -27,11 +27,12 @@
|
|||||||
<hr style="width: 55%" />
|
<hr style="width: 55%" />
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="navlist">
|
<ul class="navlist">
|
||||||
<li><a href="">Home</a></li>
|
|
||||||
<li><a href="docs/index.html">Documentation</a></li>
|
<li><a href="docs/index.html">Documentation</a></li>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="src/constructor/constructor.html">Constructor</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<p class="version">v. 0.2.6</p>
|
<p class="version">v. 0.2.7</p>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -46,12 +47,14 @@
|
|||||||
<input type="submit" value="Submit!" class="example-select_submit" />
|
<input type="submit" value="Submit!" class="example-select_submit" />
|
||||||
|
|
||||||
<button type="button" class="check-code" id="first">View code</button>
|
<button type="button" class="check-code" id="first">View code</button>
|
||||||
|
|
||||||
<code id="codeFirst">
|
<code id="codeFirst">
|
||||||
<pre>
|
<pre>
|
||||||
|
<button class="copy" id="cp1">Copy code</button>
|
||||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
<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>
|
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||||
placeholder: <span class="code__string">'Choose a car',</span>
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
lable: <span class="code__string">'EXAMPLE',</span>
|
label: <span class="code__string">'EXAMPLE',</span>
|
||||||
items: [
|
items: [
|
||||||
<span class="code__string">'BMW',</span>
|
<span class="code__string">'BMW',</span>
|
||||||
{
|
{
|
||||||
@ -78,90 +81,93 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example-select">
|
<div class="example-select">
|
||||||
<h2 class="example-select_title">Default select with function nativeSelectMode</h2>
|
<h2 class="example-select_title">
|
||||||
|
Default select with function nativeSelectMode
|
||||||
|
</h2>
|
||||||
|
|
||||||
<form method="get" class="form">
|
<p style="margin-left: 12px; color: white">
|
||||||
<p style="margin-left: 12px; color: white">
|
*Native select appears on mobile resolution.
|
||||||
*Native select appears on mobile resolution.
|
</p>
|
||||||
</p>
|
<div class="layout-select">
|
||||||
<div class="layout-select">
|
<button class="cg-dropdown cg-dropdown_selectNative"></button>
|
||||||
<button class="cg-dropdown cg-dropdown_selectNative"></button>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="button" class="check-code" id="Native">View code</button>
|
<button type="button" class="check-code" id="Native">View code</button>
|
||||||
<code id="codeNative">
|
<code id="codeNative">
|
||||||
<pre>
|
<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>({
|
<button class="copy" id="cp2">Copy code</button>
|
||||||
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
||||||
placeholder: <span class="code__string">'Choose a car',</span>
|
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||||
nativeSelectMode: <span class="code__keyword">true,</span>
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
items: [
|
nativeSelectMode: <span class="code__keyword">true,</span>
|
||||||
<span class="code__string">'BMW',</span>
|
items: [
|
||||||
{
|
<span class="code__string">'BMW',</span>
|
||||||
id: <span class="code__string">'213sade',</span>
|
{
|
||||||
title: <span class="code__string">'Opel',</span>
|
id: <span class="code__string">'213sade',</span>
|
||||||
value: 1,
|
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>
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
<span class="code__string">'Mersedes',</span>
|
||||||
</pre>
|
<span class="code__string">'MAN',</span>
|
||||||
</code>
|
<span class="code__string">'Ferari',</span>
|
||||||
</form>
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example-select">
|
<div class="example-select">
|
||||||
<h2 class="example-select_title">Default select with function listDisplayMode</h2>
|
<h2 class="example-select_title">
|
||||||
|
Default select with function listDisplayMode
|
||||||
|
</h2>
|
||||||
|
|
||||||
<form method="get" class="form">
|
<p style="margin-left: 12px; color: white">
|
||||||
<p style="margin-left: 12px; color: white">
|
*When using this method, the selection sheet appears as a modal
|
||||||
*When using this method, the selection sheet appears as a modal window.
|
window.
|
||||||
</p>
|
</p>
|
||||||
<div class="layout-select">
|
<div class="layout-select">
|
||||||
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
|
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="button" class="check-code" id="six">View code</button>
|
<button type="button" class="check-code" id="six">View code</button>
|
||||||
|
|
||||||
<code id="codeSix">
|
<code id="codeSix">
|
||||||
<pre>
|
<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>({
|
<button class="copy" id="cp3">Copy code</button>
|
||||||
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
|
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
||||||
placeholder: <span class="code__string">'Choose a car',</span>
|
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
|
||||||
listDisplayMode: <span class="code__keyword">true,</span>
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
items: [
|
listDisplayMode: <span class="code__keyword">true,</span>
|
||||||
<span class="code__string">'BMW',</span>
|
items: [
|
||||||
{
|
<span class="code__string">'BMW',</span>
|
||||||
id: <span class="code__string">'213sade',</span>
|
{
|
||||||
title: <span class="code__string">'Opel',</span>
|
id: <span class="code__string">'213sade',</span>
|
||||||
value: 1,
|
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>
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
<span class="code__string">'Mersedes',</span>
|
||||||
</pre>
|
<span class="code__string">'MAN',</span>
|
||||||
</code>
|
<span class="code__string">'Ferari',</span>
|
||||||
</form>
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example-select">
|
<div class="example-select">
|
||||||
@ -173,10 +179,11 @@
|
|||||||
|
|
||||||
<code id="codeSecond">
|
<code id="codeSecond">
|
||||||
<pre>
|
<pre>
|
||||||
|
<button class="copy" id="cp4">Copy code</button>
|
||||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
<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>
|
selector: <span class="code__string">'.cg-dropdown_three',</span>
|
||||||
placeholder: <span class="code__string">'URL',</span>
|
placeholder: <span class="code__string">'URL',</span>
|
||||||
url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span>
|
url: <span class="code__string">'https://jsonplaceholder.typicode.com/todos',</span>
|
||||||
searchMode: <span class="code__keyword">true,</span>
|
searchMode: <span class="code__keyword">true,</span>
|
||||||
darkTheme: <span class="code__keyword">false,</span>
|
darkTheme: <span class="code__keyword">false,</span>
|
||||||
language: <span class="code__string">'ru',</span>
|
language: <span class="code__string">'ru',</span>
|
||||||
@ -201,16 +208,16 @@
|
|||||||
<div class="col">
|
<div class="col">
|
||||||
<h5>Default theme:</h5>
|
<h5>Default theme:</h5>
|
||||||
<p style="margin-right: 50px">
|
<p style="margin-right: 50px">
|
||||||
To change the theme of the select, you need to specify this parameter in the select
|
To change the theme of the select, you need to specify this
|
||||||
settings. The default theme is the classic theme, you can choose a white or dark
|
parameter in the select settings. The default theme is the
|
||||||
theme.
|
classic theme, you can choose a white or dark theme.
|
||||||
</p>
|
</p>
|
||||||
<code style="display: block; margin-top: 104px; ">
|
<code style="display: block; margin-top: 104px">
|
||||||
<pre style="height: 240px;">
|
<pre style="height: 240px">
|
||||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
<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>
|
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||||
placeholder: <span class="code__string">'Choose a car',</span>
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
lable: <span class="code__string">'EXAMPLE',</span>
|
label: <span class="code__string">'EXAMPLE',</span>
|
||||||
items: [
|
items: [
|
||||||
...
|
...
|
||||||
],
|
],
|
||||||
@ -224,11 +231,14 @@
|
|||||||
<h5>Create custom theme:</h5>
|
<h5>Create custom theme:</h5>
|
||||||
<div class="createTheme">
|
<div class="createTheme">
|
||||||
<p style="margin-right: 25px">
|
<p style="margin-right: 25px">
|
||||||
To create your own theme, you need to create an object with the following fields.
|
To create your own theme, you need to create an object with
|
||||||
In these fields you need to insert the previously created css class. After
|
the following fields. In these fields you need to insert the
|
||||||
creating the object, just pass it to the select settings.
|
previously created css class. After creating the object, just
|
||||||
<br>The main interface for creating a theme uses a Json data view, however if you want
|
pass it to the select settings.
|
||||||
to set the theme locally using classes, use the CustomTheme interface (an example with it is below)
|
<br />The main interface for creating a theme uses a Json data
|
||||||
|
view, however if you want to set the theme locally using
|
||||||
|
classes, use the CustomTheme interface (an example with it is
|
||||||
|
below)
|
||||||
</p>
|
</p>
|
||||||
<code style="display: block">
|
<code style="display: block">
|
||||||
<pre>
|
<pre>
|
||||||
@ -240,7 +250,7 @@
|
|||||||
placeholder?: <span class="code__class">object</span> ,
|
placeholder?: <span class="code__class">object</span> ,
|
||||||
caret?: <span class="code__class">object</span> ,
|
caret?: <span class="code__class">object</span> ,
|
||||||
search?: <span class="code__class">object</span> ,
|
search?: <span class="code__class">object</span> ,
|
||||||
lable?: <span class="code__class">object</span> ,
|
label?: <span class="code__class">object</span> ,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</pre>
|
</pre>
|
||||||
@ -258,7 +268,7 @@
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<code style="display: block">
|
<code style="display: block">
|
||||||
<pre style="height:460px">
|
<pre style="height: 460px">
|
||||||
<span class="code__keyword">const</span> <span class="code__var">newTheme</span>:<span class="code__class"> CustomTheme</span> = {
|
<span class="code__keyword">const</span> <span class="code__var">newTheme</span>:<span class="code__class"> CustomTheme</span> = {
|
||||||
name: <span class="code__string">'test',</span>
|
name: <span class="code__string">'test',</span>
|
||||||
styles: {
|
styles: {
|
||||||
@ -268,7 +278,7 @@
|
|||||||
caret: <span class="code__string">'caretTestClass',</span> ,
|
caret: <span class="code__string">'caretTestClass',</span> ,
|
||||||
search: <span class="code__string">'searchTestClass',</span> ,
|
search: <span class="code__string">'searchTestClass',</span> ,
|
||||||
chips: <span class="code__string">'chipsTestClass',</span> ,
|
chips: <span class="code__string">'chipsTestClass',</span> ,
|
||||||
lable: <span class="code__string">'lableTestClass',</span> ,
|
label: <span class="code__string">'labelTestClass',</span> ,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -305,7 +315,7 @@
|
|||||||
borderTop: '6px solid white'
|
borderTop: '6px solid white'
|
||||||
</span> },
|
</span> },
|
||||||
search: {},
|
search: {},
|
||||||
lable: {},
|
label: {},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</pre>
|
</pre>
|
||||||
@ -326,44 +336,6 @@
|
|||||||
</div>
|
</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">
|
<div class="example-select">
|
||||||
<h1 class="example-select_title">Categories</h1>
|
<h1 class="example-select_title">Categories</h1>
|
||||||
|
|
||||||
@ -374,6 +346,7 @@
|
|||||||
|
|
||||||
<code id="codeThird">
|
<code id="codeThird">
|
||||||
<pre>
|
<pre>
|
||||||
|
<button class="copy" id="cp5">Copy code</button>
|
||||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
<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>
|
selector: <span class="code__string">'.cg-dropdown_categories',</span>
|
||||||
placeholder: <span class="code__string">'Выберите регион',</span>
|
placeholder: <span class="code__string">'Выберите регион',</span>
|
||||||
@ -427,20 +400,28 @@
|
|||||||
|
|
||||||
<div class="example-select">
|
<div class="example-select">
|
||||||
<h1 class="example-select_title">Use callbacks</h1>
|
<h1 class="example-select_title">Use callbacks</h1>
|
||||||
|
|
||||||
<div class="layout-select">
|
<div class="layout-select">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<p style="color: white;">When using a callback, you can pass in the first parameter such values as: <span class="code__string">open, close, select, clear</span>.
|
<p style="color: white">
|
||||||
<br>The second parameter is a function in which there are two parameters: <span class="code__string">state</span> and <span class="code__string">value</span>.
|
When using a callback, you can pass in the first parameter such
|
||||||
<br>The output of the value can be seen in the browser console.
|
values as:
|
||||||
|
<span class="code__string">open, close, select, clear</span>.
|
||||||
|
<br />The second parameter is a function in which there are two
|
||||||
|
parameters: <span class="code__string">state</span> and
|
||||||
|
<span class="code__string">value</span>. <br />The output of the
|
||||||
|
value can be seen in the browser console.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button class="cg-dropdown cg-dropdown_callback"></button>
|
<button class="cg-dropdown cg-dropdown_callback"></button>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="check-code" id="callback">View code</button>
|
<button type="button" class="check-code" id="callback">
|
||||||
|
View code
|
||||||
|
</button>
|
||||||
|
|
||||||
<code id="codeCallback">
|
<code id="codeCallback">
|
||||||
<pre>
|
<pre>
|
||||||
|
<button class="copy" id="cp6">Copy code</button>
|
||||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
<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>
|
selector: <span class="code__string">'.cg-dropdown_categories',</span>
|
||||||
placeholder: <span class="code__string">'Choose a car',</span>
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
@ -486,6 +467,7 @@
|
|||||||
|
|
||||||
<code id="codeFourth">
|
<code id="codeFourth">
|
||||||
<pre>
|
<pre>
|
||||||
|
<button class="copy" id="cp7">Copy code</button>
|
||||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
<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>
|
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
|
||||||
placeholder: <span class="code__string">'Choose a car',</span>
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
@ -532,7 +514,12 @@
|
|||||||
<div class="example-select">
|
<div class="example-select">
|
||||||
<h1 class="example-select_title">Function disabled</h1>
|
<h1 class="example-select_title">Function disabled</h1>
|
||||||
|
|
||||||
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="chbx"
|
||||||
|
id="checkboxDisable"
|
||||||
|
style="margin: 16px"
|
||||||
|
/>
|
||||||
<label for="checkboxDisable" style="color: white">
|
<label for="checkboxDisable" style="color: white">
|
||||||
You agree to the processing of data</label
|
You agree to the processing of data</label
|
||||||
>
|
>
|
||||||
@ -544,6 +531,7 @@
|
|||||||
<button type="button" class="check-code" id="fifth">View code</button>
|
<button type="button" class="check-code" id="fifth">View code</button>
|
||||||
<code id="codeFifth">
|
<code id="codeFifth">
|
||||||
<pre>
|
<pre>
|
||||||
|
<button class="copy" id="cp8">Copy code</button>
|
||||||
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
|
<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>
|
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
|
||||||
placeholder: <span class="code__string">'Choose a car',</span>
|
placeholder: <span class="code__string">'Choose a car',</span>
|
||||||
|
|||||||
6
index.js
6
index.js
@ -1,8 +1,6 @@
|
|||||||
import CGSelect from "cg-select";
|
import CGSelect from "cg-select";
|
||||||
// import { newCustomTheme } from './src/themeTest';
|
import "./style.scss";
|
||||||
|
import "./src/buttonControlCode";
|
||||||
import "./src/example";
|
|
||||||
import "./src/constructor/constructor";
|
|
||||||
|
|
||||||
// ------------------------------Обычный селект--------------------
|
// ------------------------------Обычный селект--------------------
|
||||||
const dropdown = new CGSelect({
|
const dropdown = new CGSelect({
|
||||||
|
|||||||
5481
package-lock.json
generated
5481
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -30,7 +30,7 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://cg-select.itguild.info",
|
"homepage": "https://cg-select.itguild.info",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cg-select": "^0.2.5",
|
"cg-select": "^0.2.7",
|
||||||
"gh-pages": "^5.0.0",
|
"gh-pages": "^5.0.0",
|
||||||
"parcel": "^2.8.3"
|
"parcel": "^2.8.3"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,9 +1,22 @@
|
|||||||
|
const copy1 = document.getElementById("cp1");
|
||||||
|
const copy2 = document.getElementById("cp2");
|
||||||
|
const copy3 = document.getElementById("cp3");
|
||||||
|
const copy4 = document.getElementById("cp4");
|
||||||
|
const copy5 = document.getElementById("cp5");
|
||||||
|
const copy6 = document.getElementById("cp6");
|
||||||
|
const copy7 = document.getElementById("cp7");
|
||||||
|
const copy8 = document.getElementById("cp8");
|
||||||
|
|
||||||
const firstBtn = document.getElementById("first");
|
const firstBtn = document.getElementById("first");
|
||||||
const codeFirst = document.getElementById("codeFirst");
|
const codeFirst = document.getElementById("codeFirst");
|
||||||
|
|
||||||
|
copyCode(copy1, codeFirst);
|
||||||
|
|
||||||
const secondBtn = document.getElementById("second");
|
const secondBtn = document.getElementById("second");
|
||||||
const codeSecond = document.getElementById("codeSecond");
|
const codeSecond = document.getElementById("codeSecond");
|
||||||
|
|
||||||
|
copyCode(copy2, codeSecond);
|
||||||
|
|
||||||
const thirdBtn = document.getElementById("third");
|
const thirdBtn = document.getElementById("third");
|
||||||
const codeThird = document.getElementById("codeThird");
|
const codeThird = document.getElementById("codeThird");
|
||||||
|
|
||||||
@ -53,3 +66,10 @@ Native.addEventListener("click", () => {
|
|||||||
callback.addEventListener("click", () => {
|
callback.addEventListener("click", () => {
|
||||||
codeCallback.classList.toggle("active");
|
codeCallback.classList.toggle("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function copyCode(button, elementCopy) {
|
||||||
|
button.addEventListener("click", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
navigator.clipboard.writeText(elementCopy.textContent);
|
||||||
|
});
|
||||||
|
}
|
||||||
82
src/constructor/constructor.html
Normal file
82
src/constructor/constructor.html
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<!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="../img/logoCG.jpg" />
|
||||||
|
|
||||||
|
<title>Cg-Select</title>
|
||||||
|
<link rel="shortcut icon" href="../img/logoCG2.ico" type="image/x-icon" />
|
||||||
|
<link href="../../style.scss" rel="stylesheet" />
|
||||||
|
<link href="constructor.scss" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body class="body-example">
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<div class="header__logoBox">
|
||||||
|
<h1>CG-SELECT</h1>
|
||||||
|
<img src="../img/logoCG.jpg" alt="#" class="header__logo" />
|
||||||
|
</div>
|
||||||
|
<hr style="width: 55%" />
|
||||||
|
<nav>
|
||||||
|
<ul class="navlist">
|
||||||
|
<li><a href="../../docs/index.html">Documentation</a></li>
|
||||||
|
<li><a href="../../index.html">Home</a></li>
|
||||||
|
<li><a href="./constructor.html">Constructor</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<p class="version">v. 0.2.7</p>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container content">
|
||||||
|
<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>
|
||||||
|
</body>
|
||||||
|
<script type="module" src="constructor.js"></script>
|
||||||
|
</html>
|
||||||
@ -1,6 +1,3 @@
|
|||||||
// @import '/src/main.scss';
|
|
||||||
@import "./src/constructor/constructor.scss";
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
@ -80,7 +77,7 @@
|
|||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
margin: 15px 0 30px 0;
|
margin: 15px 0 30px 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 230px;
|
width: 500px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline;
|
display: inline;
|
||||||
@ -194,6 +191,7 @@ code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
position: relative;
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
padding: 30px 15px 0 5px;
|
padding: 30px 15px 0 5px;
|
||||||
@ -203,6 +201,23 @@ pre {
|
|||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.copy {
|
||||||
|
position: absolute;
|
||||||
|
top: 25px;
|
||||||
|
right: 25px;
|
||||||
|
height: 29px;
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #d7d7d7;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.code {
|
.code {
|
||||||
&__class,
|
&__class,
|
||||||
&__var,
|
&__var,
|
||||||
Loading…
Reference in New Issue
Block a user