CG-SELECT
v. 0.3.11
v. 0.3.11
*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,
});