582 lines
24 KiB
HTML
582 lines
24 KiB
HTML
<!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/img/logoCG.jpg" />
|
||
|
||
<title>Cg-Select</title>
|
||
<link rel="shortcut icon" href="src/img/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/img/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.6</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="Submit!" 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: 104px; ">
|
||
<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>({
|
||
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.
|
||
<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>
|
||
<code style="display: block">
|
||
<pre>
|
||
<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> ,
|
||
lable?: <span class="code__class">object</span> ,
|
||
},
|
||
};
|
||
</pre>
|
||
</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h5 style="margin: 20px 0 5px; text-align: center">Example:</h5>
|
||
|
||
<div class="row type">
|
||
<h6>CustomTheme</h6>
|
||
<h6>CustomThemeJson</h6>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<code style="display: block">
|
||
<pre style="height:460px">
|
||
<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>
|
||
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> ,
|
||
},
|
||
};
|
||
|
||
.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> ;
|
||
}
|
||
</pre>
|
||
</code>
|
||
|
||
<code style="display: block">
|
||
<pre>
|
||
<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">
|
||
color: 'red',
|
||
background: 'green',
|
||
</span> },
|
||
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: {},
|
||
lable: {},
|
||
},
|
||
};
|
||
</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">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">Use callbacks</h1>
|
||
|
||
<div class="layout-select">
|
||
<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>.
|
||
<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>
|
||
</div>
|
||
<button class="cg-dropdown cg-dropdown_callback"></button>
|
||
</div>
|
||
<button type="button" class="check-code" id="callback">View code</button>
|
||
|
||
<code id="codeCallback">
|
||
<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">'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>
|
||
|
||
<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>
|