2022-12-28 20:35:00 +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" />
|
|
|
|
|
<meta property="og:image" content="/src/images/logoCG.jpg" />
|
|
|
|
|
|
|
|
|
|
<title>Cg-Select</title>
|
2023-02-08 15:03:36 +03:00
|
|
|
<link rel="shortcut icon" href="../src/images/logoCG2.ico" type="image/x-icon" />
|
2022-12-28 20:35:00 +03:00
|
|
|
<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>
|
2023-01-23 13:38:10 +03:00
|
|
|
<li><a href="/docs/index.html">Documentation</a></li>
|
2022-12-28 20:35:00 +03:00
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container content">
|
|
|
|
|
<div class="example-select">
|
2023-02-06 15:24:36 +03:00
|
|
|
<h2 class="example-select_title">Default select</h2>
|
2022-12-28 20:35:00 +03:00
|
|
|
<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" />
|
|
|
|
|
|
2023-02-06 15:24:36 +03:00
|
|
|
<button type="button" class="check-code" id="first">View code</button>
|
2022-12-28 20:35:00 +03:00
|
|
|
<code id="codeFirst">
|
|
|
|
|
<pre>
|
2023-01-18 19:40:24 +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>({
|
2022-12-28 20:35:00 +03:00
|
|
|
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
2023-02-06 15:24:36 +03:00
|
|
|
placeholder: <span class="code__string">'Choose a car',</span>
|
2022-12-28 20:35:00 +03:00
|
|
|
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">
|
2023-02-06 15:24:36 +03:00
|
|
|
<h2 class="example-select_title">Default select with function nativeSelectMode</h2>
|
2022-12-28 20:35:00 +03:00
|
|
|
|
|
|
|
|
<form method="get" class="form">
|
|
|
|
|
<p style="margin-left: 12px; color: white">
|
2023-02-06 15:24:36 +03:00
|
|
|
*Native select appears on mobile resolution.
|
2022-12-28 20:35:00 +03:00
|
|
|
</p>
|
|
|
|
|
<div class="layout-select">
|
|
|
|
|
<button class="cg-dropdown cg-dropdown_selectNative"></button>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-02-06 15:24:36 +03:00
|
|
|
<button type="button" class="check-code" id="Native">View code</button>
|
2022-12-28 20:35:00 +03:00
|
|
|
<code id="codeNative">
|
|
|
|
|
<pre>
|
2023-01-18 19:40:24 +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>({
|
2022-12-28 20:35:00 +03:00
|
|
|
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
2023-02-06 15:24:36 +03:00
|
|
|
placeholder: <span class="code__string">'Choose a car',</span>
|
2022-12-28 20:35:00 +03:00
|
|
|
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">
|
2023-02-06 15:24:36 +03:00
|
|
|
<h2 class="example-select_title">Default select with function listDisplayMode</h2>
|
2022-12-28 20:35:00 +03:00
|
|
|
|
|
|
|
|
<form method="get" class="form">
|
|
|
|
|
<p style="margin-left: 12px; color: white">
|
2023-02-06 15:24:36 +03:00
|
|
|
*When using this method, the selection sheet appears as a modal window.
|
2022-12-28 20:35:00 +03:00
|
|
|
</p>
|
|
|
|
|
<div class="layout-select">
|
|
|
|
|
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-02-06 15:24:36 +03:00
|
|
|
<button type="button" class="check-code" id="six">View code</button>
|
2022-12-28 20:35:00 +03:00
|
|
|
|
|
|
|
|
<code id="codeSix">
|
|
|
|
|
<pre>
|
2023-01-18 19:40:24 +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>({
|
2022-12-28 20:35:00 +03:00
|
|
|
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
|
2023-02-06 15:24:36 +03:00
|
|
|
placeholder: <span class="code__string">'Choose a car',</span>
|
2022-12-28 20:35:00 +03:00
|
|
|
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">
|
2023-02-06 15:24:36 +03:00
|
|
|
<h1 class="example-select_title">Select with data from URL</h1>
|
2022-12-28 20:35:00 +03:00
|
|
|
<div class="layout-select">
|
|
|
|
|
<button class="cg-dropdown cg-dropdown_three"></button>
|
|
|
|
|
</div>
|
2023-02-06 15:24:36 +03:00
|
|
|
<button type="button" class="check-code" id="second">View code</button>
|
2022-12-28 20:35:00 +03:00
|
|
|
|
|
|
|
|
<code id="codeSecond">
|
|
|
|
|
<pre>
|
2023-01-18 19:40:24 +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>({
|
2022-12-28 20:35:00 +03:00
|
|
|
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">
|
2023-02-06 15:24:36 +03:00
|
|
|
<h1 class="example-select_title">Categories</h1>
|
2022-12-28 20:35:00 +03:00
|
|
|
|
|
|
|
|
<div class="layout-select">
|
|
|
|
|
<button class="cg-dropdown cg-dropdown_categories"></button>
|
|
|
|
|
</div>
|
2023-02-06 15:24:36 +03:00
|
|
|
<button type="button" class="check-code" id="third">View code</button>
|
2022-12-28 20:35:00 +03:00
|
|
|
|
|
|
|
|
<code id="codeThird">
|
|
|
|
|
<pre>
|
2023-01-18 19:40:24 +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>({
|
2022-12-28 20:35:00 +03:00
|
|
|
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">
|
2023-02-06 15:24:36 +03:00
|
|
|
<h1 class="example-select_title">Button control</h1>
|
2022-12-28 20:35:00 +03:00
|
|
|
<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>
|
|
|
|
|
|
2023-02-06 15:24:36 +03:00
|
|
|
<button type="button" class="check-code" id="fourth">View code</button>
|
2022-12-28 20:35:00 +03:00
|
|
|
|
|
|
|
|
<code id="codeFourth">
|
|
|
|
|
<pre>
|
2023-01-18 19:40:24 +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>({
|
2022-12-28 20:35:00 +03:00
|
|
|
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
|
2023-02-06 15:24:36 +03:00
|
|
|
placeholder: <span class="code__string">'Choose a car',</span>
|
2022-12-28 20:35:00 +03:00
|
|
|
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">
|
2023-02-06 15:24:36 +03:00
|
|
|
<h1 class="example-select_title">Function disabled</h1>
|
2022-12-28 20:35:00 +03:00
|
|
|
|
|
|
|
|
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
|
2023-02-06 15:24:36 +03:00
|
|
|
<label for="checkboxDisable" style="color: white">
|
|
|
|
|
You agree to the processing of data</label
|
|
|
|
|
>
|
2022-12-28 20:35:00 +03:00
|
|
|
|
|
|
|
|
<div class="layout-select">
|
|
|
|
|
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-02-06 15:24:36 +03:00
|
|
|
<button type="button" class="check-code" id="fifth">View code</button>
|
2022-12-28 20:35:00 +03:00
|
|
|
<code id="codeFifth">
|
|
|
|
|
<pre>
|
2023-01-18 19:40:24 +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>({
|
2022-12-28 20:35:00 +03:00
|
|
|
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
|
2023-02-06 15:24:36 +03:00
|
|
|
placeholder: <span class="code__string">'Choose a car',</span>
|
2022-12-28 20:35:00 +03:00
|
|
|
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>
|
|
|
|
|
},
|
|
|
|
|
},
|
2023-02-08 15:03:36 +03:00
|
|
|
multiselect: <span class="code__keyword">true,</span>
|
2022-12-28 20:35:00 +03:00
|
|
|
});
|
|
|
|
|
</pre>
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script type="module" src="index.js"></script>
|
|
|
|
|
</html>
|
