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" / >
2023-02-23 19:02:55 +03:00
< meta property = "og:image" content = "src/img/logoCG.jpg" / >
2023-02-23 15:49:34 +03:00
< title > Cg-Select< / title >
2023-02-23 19:02:55 +03:00
< link rel = "shortcut icon" href = "src/img/logoCG2.ico" type = "image/x-icon" / >
2023-02-23 15:49:34 +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 >
2023-02-23 19:02:55 +03:00
< img src = "src/img/logoCG.jpg" alt = "#" class = "header__logo" / >
2023-02-23 15:49:34 +03:00
< / div >
< hr style = "width: 55%" / >
< nav >
< ul class = "navlist" >
< li > < a href = "" > Home< / a > < / li >
2023-02-23 19:02:55 +03:00
< li > < a href = "docs/index.html" > Documentation< / a > < / li >
2023-02-23 15:49:34 +03:00
< / ul >
< / nav >
2023-03-21 17:19:59 +03:00
< p class = "version" > v. 0.2.6< / p >
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 >
2023-03-22 14:36:22 +03:00
< input type = "submit" value = "Submit!" class = "example-select_submit" / >
2023-02-23 15:49:34 +03:00
< 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 >
2023-03-21 17:19:59 +03:00
< code style = "display: block; margin-top: 104px" >
2023-02-23 15:49:34 +03:00
< 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.
2023-03-21 17:19:59 +03:00
< 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)
2023-02-23 15:49:34 +03:00
< / p >
< code style = "display: block" >
< pre >
2023-03-21 17:19:59 +03:00
< span class = "code__keyword" > interface< / span > < span class = "code__var" > CustomThemeJson< / span > {
2023-02-23 15:49:34 +03:00
name: < span class = "code__class" > 'string',< / span >
styles: {
2023-03-21 17:19:59 +03:00
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 > ,
2023-02-23 15:49:34 +03:00
},
2023-03-21 17:19:59 +03:00
};
2023-02-23 15:49:34 +03:00
< / pre >
< / code >
< / div >
< / div >
< / div >
< h5 style = "margin: 20px 0 5px; text-align: center" > Example:< / h5 >
2023-03-02 19:45:03 +03:00
< div class = "row type" >
2023-03-21 17:19:59 +03:00
< h6 > CustomTheme< / h6 >
< h6 > CustomThemeJson< / h6 >
2023-02-23 15:49:34 +03:00
< / div >
< div class = "row" >
< code style = "display: block" >
2023-03-21 17:19:59 +03:00
< pre style = "height:430px" >
< span class = "code__keyword" > const< / span > < span class = "code__var" > newTheme< / span > :< span class = "code__class" > CustomTheme< / span > = {
2023-02-23 15:49:34 +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 > ,
lable: < span class = "code__string" > 'lableTestClass',< / span > ,
},
2023-03-21 17:19:59 +03:00
};
2023-02-23 15:49:34 +03:00
< / pre >
< / code >
< code style = "display: block" >
< pre >
2023-03-21 17:19:59 +03:00
< span class = "code__keyword" > const< / span > < span class = "code__var" > newCustomTheme< / span > :< span class = "code__class" > CustomThemeJson< / span > = {
2023-02-23 15:49:34 +03:00
name: < span class = "code__string" > 'test',< / span >
styles: {
2023-03-21 17:19:59 +03:00
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: {},
2023-02-23 15:49:34 +03:00
},
2023-03-21 17:19:59 +03:00
};
2023-02-23 15:49:34 +03:00
< / pre >
< / code >
< / div >
2023-03-21 17:19:59 +03:00
< h6 style = "text-align: center; margin-top: 15px;" > CSS< / h6 >
2023-03-02 19:45:03 +03:00
< code style = "display: block; width: 44%" class = "stylesTheme" >
2023-02-23 15:49:34 +03:00
< pre >
.headTestClass {
2023-02-23 19:52:58 +03:00
background-color: < span class = "code__string" > #8297ff< / span > ;
color: < span class = "code__string" > white< / span > ;
2023-02-23 15:49:34 +03:00
}
.listTestClass {
2023-02-23 19:52:58 +03:00
background-color: < span class = "code__string" > #8297ff< / span > ;
border: < span class = "code__string" > 1px solid black< / span > ;
color: < span class = "code__string" > white< / span > ;
2023-02-23 15:49:34 +03:00
}
< / 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 >
2023-03-03 14:54:11 +03:00
< 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 < 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 >
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 >
< 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 >
