CG-SELECT
v. 0.3.0
v. 0.3.0
*Native select appears on mobile resolution.
const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Choose a car',
nativeSelectMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
*When using this method, the selection sheet appears as a modal window.
const dropdown = new CGSelect({
selector: '.cg-dropdown_listDisplayMode',
placeholder: 'Choose a car',
listDisplayMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
const dropdown = new CGSelect({
selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'https://jsonplaceholder.typicode.com/todos',
searchMode: true,
darkTheme: false,
language: 'ru',
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
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.
const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Choose a car',
label: 'EXAMPLE',
items: [
...
],
theme: 'dark / white'
});
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.
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)
interface CustomThemeJson {
name: 'string',
styles: {
head?: object
list?: object ,
placeholder?: object ,
caret?: object ,
search?: object ,
label?: object ,
},
};
const newTheme: CustomTheme = {
name: 'test',
styles: {
head: 'headTestClass',
list: 'listTestClass', ,
placeholder: 'placeholderTestClass', ,
caret: 'caretTestClass', ,
search: 'searchTestClass', ,
chips: 'chipsTestClass', ,
label: 'labelTestClass', ,
},
};
.headTestClass {
background-color: #8297ff;
color: white;
}
.listTestClass {
background-color: #8297ff;
border: 1px solid black;
color: white ;
}
const newCustomTheme: CustomThemeJson = {
name: 'test',
styles: {
head: {
color: 'red',
background: 'green',
},
list: {
color: 'red',
background: 'green',
},
placeholder: {
color: 'red',
fontSize: '26px',
},
caret: {
borderTop: '6px solid white'
},
search: {},
label: {},
},
};
See an example of a select on codesandbox.io
const dropdown = new CGSelect({
selector: '.cg-dropdown_categories',
placeholder: 'Выберите регион',
searchMode: true,
items: [
{
category: 'Russia',
categoryItems: [
{
id: '28qwds',
title: 'Москва',
value: 0,
},
'Ростов-на-дону',
'Саратов',
'Волгоград',
'Донецк',
],
},
{
category: 'USA',
categoryItems: [
'Alabama',
'Texas',
'Colorado',
'Klirens',
'Los-Angeles'],
},
{
category: 'France',
categoryItems: ['Paris'],
},
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
placeholder: {
maxWidth: '500px ',
},
},
multiselect: true,
multiselectTag: true,
});
When using a callback, you can pass in the first parameter such
values as:
open, close, select, clear.
The second parameter is a function in which there are two
parameters: state and
value.
The output of the
value can be seen in the browser console.
const dropdown = new CGSelect({
selector: '.cg-dropdown_categories',
placeholder: 'Choose a car',
searchMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
multiselect: true,
multiselectTag: true,
});
const dropdown = new CGSelect({
selector: '.cg-dropdown_usedBtn',
placeholder: 'Choose a car',
searchMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
styles: {
head: {
width: '830px',
color: 'black',
backgroundColor: 'rgb(176 223 167)',
},
list: {
width: '824px',
color: 'black',
backgroundColor: 'rgb(176 223 167)',
},
caret: {
borderTop: '6px solid black',
},
search: {
backgroundColor: '#d7ffff',
borderRadius: '5px',
borderBottom: 'none',
width: '95%',
color: 'black',
},
},
multiselect: true,
});
const dropdown = new CGSelect({
selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Choose a car',
searchMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
placeholder: {
maxWidth: '500px ',
},
},
multiselect: true,
});