MaxOvs19/Example-CG-SELECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
383c4f8f77
Example-CG-SELECT/index.html

571 lines
23 KiB
HTML
Raw Normal View History

Inishial example page
2023-02-23 15:49:34 +03:00
<!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" />
Added img
2023-02-23 19:02:55 +03:00
<meta property="og:image" content="src/img/logoCG.jpg" />
Inishial example page
2023-02-23 15:49:34 +03:00
<title>Cg-Select</title>
Added img
2023-02-23 19:02:55 +03:00
<link rel="shortcut icon" href="src/img/logoCG2.ico" type="image/x-icon" />
Fixed pages
2023-04-04 20:57:05 +03:00
<link type="text/css" media="all" rel="stylesheet" href="style.scss" />
Inishial example page
2023-02-23 15:49:34 +03:00
</head>
<body class="body-example">
<div class="container">
<header class="header">
<div class="header__logoBox">
<h1>CG-SELECT</h1>
Added img
2023-02-23 19:02:55 +03:00
<img src="src/img/logoCG.jpg" alt="#" class="header__logo" />
Inishial example page
2023-02-23 15:49:34 +03:00
</div>
<hr style="width: 55%" />
<nav>
<ul class="navlist">
Fixed pages
2023-04-04 20:57:05 +03:00
<li><a href="">Home</a></li>
Added cdn page
2023-04-17 17:05:39 +03:00
<li><a href="docs/index.html">Documentation</a></li>
Fixed pages
2023-04-04 20:57:05 +03:00
<li><a href="src/constructor/constructor.html">Constructor</a></li>
Added cdn page
2023-04-17 17:05:39 +03:00
<li><a href="src/cdn/cdn.html">CDN</a></li>
Inishial example page
2023-02-23 15:49:34 +03:00
</ul>
</nav>
Fixed media screen
2023-06-08 12:16:44 +03:00
<p class="version">v. 0.3.12</p>
Inishial example page
2023-02-23 15:49:34 +03:00
</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>
Update index.html
2023-03-22 14:36:22 +03:00
<input type="submit" value="Submit!" class="example-select_submit" />
Inishial example page
2023-02-23 15:49:34 +03:00
<button type="button" class="check-code" id="first">View code</button>
Fixed pages
2023-04-04 20:57:05 +03:00
Inishial example page
2023-02-23 15:49:34 +03:00
<code id="codeFirst">
<pre>
Fixed pages
2023-04-04 20:57:05 +03:00
<button class="copy" id="cp1">Copy code</button>
Inishial example page
2023-02-23 15:49:34 +03:00
<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>
Fixed pages
2023-04-04 20:57:05 +03:00
label: <span class="code__string">'EXAMPLE',</span>
Inishial example page
2023-02-23 15:49:34 +03:00
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">
Fixed pages
2023-04-04 20:57:05 +03:00
<h2 class="example-select_title">
Default select with function nativeSelectMode
</h2>
Inishial example page
2023-02-23 15:49:34 +03:00
Fixed pages
2023-04-04 20:57:05 +03:00
<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>
Inishial example page
2023-02-23 15:49:34 +03:00
Fixed pages
2023-04-04 20:57:05 +03:00
<button type="button" class="check-code" id="Native">View code</button>
<code id="codeNative">
<pre>
<button class="copy" id="cp2">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>({
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,
Inishial example page
2023-02-23 15:49:34 +03:00
},
Fixed pages
2023-04-04 20:57:05 +03:00
<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>
Inishial example page
2023-02-23 15:49:34 +03:00
</div>
<div class="example-select">
Fixed pages
2023-04-04 20:57:05 +03:00
<h2 class="example-select_title">
Default select with function listDisplayMode
</h2>
<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>
Inishial example page
2023-02-23 15:49:34 +03:00
Fixed pages
2023-04-04 20:57:05 +03:00
<button type="button" class="check-code" id="six">View code</button>
Inishial example page
2023-02-23 15:49:34 +03:00
Fixed pages
2023-04-04 20:57:05 +03:00
<code id="codeSix">
<pre>
<button class="copy" id="cp3">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>({
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,
Inishial example page
2023-02-23 15:49:34 +03:00
},
Fixed pages
2023-04-04 20:57:05 +03:00
<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>
Inishial example page
2023-02-23 15:49:34 +03:00
</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>
Fixed pages
2023-04-04 20:57:05 +03:00
<button class="copy" id="cp4">Copy code</button>
Inishial example page
2023-02-23 15:49:34 +03:00
<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>
Fixed pages
2023-04-04 20:57:05 +03:00
url: <span class="code__string">'https://jsonplaceholder.typicode.com/todos',</span>
Inishial example page
2023-02-23 15:49:34 +03:00
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">
Fixed pages
2023-04-04 20:57:05 +03:00
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.
Inishial example page
2023-02-23 15:49:34 +03:00
</p>
Fixed pages
2023-04-04 20:57:05 +03:00
<code style="display: block; margin-top: 104px">
<pre style="height: 240px">
Fixed main page
2023-03-22 16:51:31 +03:00
<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>
Fixed pages
2023-04-04 20:57:05 +03:00
label: <span class="code__string">'EXAMPLE',</span>
Fixed main page
2023-03-22 16:51:31 +03:00
items: [
...
],
<span class="code__keyword">theme</span>: <span class="code__string">'dark / white'</span>
});
Inishial example page
2023-02-23 15:49:34 +03:00
</pre>
</code>
</div>
<div class="col">
<h5>Create custom theme:</h5>
<div class="createTheme">
<p style="margin-right: 25px">
Fixed pages
2023-04-04 20:57:05 +03:00
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.
<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)
Inishial example page
2023-02-23 15:49:34 +03:00
</p>
<code style="display: block">
<pre>
Fixed main page
2023-03-22 16:51:31 +03:00
<span class="code__keyword">interface</span> <span class="code__var">CustomThemeJson</span> {
name: <span class="code__class">'string',</span>
styles: {
head?: <span class="code__class">object</span>
list?: <span class="code__class">object</span> ,
placeholder?: <span class="code__class">object</span> ,
caret?: <span class="code__class">object</span> ,
search?: <span class="code__class">object</span> ,
Fixed pages
2023-04-04 20:57:05 +03:00
label?: <span class="code__class">object</span> ,
Fixed main page
2023-03-22 16:51:31 +03:00
},
};
Inishial example page
2023-02-23 15:49:34 +03:00
</pre>
</code>
</div>
</div>
</div>
<h5 style="margin: 20px 0 5px; text-align: center">Example:</h5>
Fixed bugs
2023-03-02 19:45:03 +03:00
<div class="row type">
Fixed index.html
2023-03-21 17:19:59 +03:00
<h6>CustomTheme</h6>
<h6>CustomThemeJson</h6>
Inishial example page
2023-02-23 15:49:34 +03:00
</div>
<div class="row">
<code style="display: block">
Fixed pages
2023-04-04 20:57:05 +03:00
<pre style="height: 460px">
Fixed index.html
2023-03-21 17:19:59 +03:00
<span class="code__keyword">const</span> <span class="code__var">newTheme</span>:<span class="code__class"> CustomTheme</span> = {
Fixed main page
2023-03-22 16:51:31 +03:00
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> ,
Fixed pages
2023-04-04 20:57:05 +03:00
label: <span class="code__string">'labelTestClass',</span> ,
Fixed main page
2023-03-22 16:51:31 +03:00
},
};
.headTestClass {
background-color: <span class="code__string">#8297ff</span>;
color: <span class="code__string">white</span>;
}
.listTestClass {
background-color: <span class="code__string">#8297ff</span>;
border: <span class="code__string">1px solid black</span>;
color: <span class="code__string">white</span> ;
}
Inishial example page
2023-02-23 15:49:34 +03:00
</pre>
</code>
<code style="display: block">
<pre>
Fixed main page
2023-03-22 16:51:31 +03:00
<span class="code__keyword">const</span> <span class="code__var">newCustomTheme</span>:<span class="code__class"> CustomThemeJson</span> = {
name: <span class="code__string">'test',</span>
styles: {
head: {<span class="code__string">
Fixed index.html
2023-03-21 17:19:59 +03:00
color: 'red',
Fixed main page
2023-03-22 16:51:31 +03:00
background: 'green',
Fixed index.html
2023-03-21 17:19:59 +03:00
</span> },
Fixed main page
2023-03-22 16:51:31 +03:00
list: {<span class="code__string">
color: 'red',
background: 'green',
</span>},
placeholder: {<span class="code__string">
color: 'red',
fontSize: '26px',
</span> },
caret: {<span class="code__string">
borderTop: '6px solid white'
</span> },
search: {},
Fixed pages
2023-04-04 20:57:05 +03:00
label: {},
Fixed main page
2023-03-22 16:51:31 +03:00
},
};
Inishial example page
2023-02-23 15:49:34 +03:00
</pre>
</code>
</div>
<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">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>
Fixed pages
2023-04-04 20:57:05 +03:00
<button class="copy" id="cp5">Copy code</button>
Inishial example page
2023-02-23 15:49:34 +03:00
<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>
Fixed description and layout
2023-03-03 14:54:11 +03:00
<div class="example-select">
<h1 class="example-select_title">Use callbacks</h1>
Fixed pages
2023-04-04 20:57:05 +03:00
Fixed description and layout
2023-03-03 14:54:11 +03:00
<div class="layout-select">
<div class="col">
Fixed pages
2023-04-04 20:57:05 +03:00
<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>.
<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.
Fixed description and layout
2023-03-03 14:54:11 +03:00
</p>
</div>
<button class="cg-dropdown cg-dropdown_callback"></button>
</div>
Fixed pages
2023-04-04 20:57:05 +03:00
<button type="button" class="check-code" id="callback">
View code
</button>
Fixed description and layout
2023-03-03 14:54:11 +03:00
<code id="codeCallback">
<pre>
Fixed pages
2023-04-04 20:57:05 +03:00
<button class="copy" id="cp6">Copy code</button>
Fixed description and layout
2023-03-03 14:54:11 +03:00
<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">'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>
},
},
multiselect: <span class="code__keyword">true,</span>
multiselectTag: <span class="code__keyword">true,</span>
});
</pre>
</code>
</div>
Inishial example page
2023-02-23 15:49:34 +03:00
<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>
Fixed pages
2023-04-04 20:57:05 +03:00
<button class="copy" id="cp7">Copy code</button>
Inishial example page
2023-02-23 15:49:34 +03:00
<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>
Fixed pages
2023-04-04 20:57:05 +03:00
<input
type="checkbox"
name="chbx"
id="checkboxDisable"
style="margin: 16px"
/>
Inishial example page
2023-02-23 15:49:34 +03:00
<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>
Fixed pages
2023-04-04 20:57:05 +03:00
<button class="copy" id="cp8">Copy code</button>
Inishial example page
2023-02-23 15:49:34 +03:00
<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>
Reference in New Issue Copy Permalink