Default select


                          const dropdown = new CGSelect({
                selector: '.cg-dropdown_one', 
                placeholder: 'Choose a car', 
                lable: 'EXAMPLE', 
                items: [
                  'BMW',
                  {
                    id: '213sade',
                    title: 'Opel',
                    value: 1,
                  },
                  'Mersedes', 
                  'MAN',  
                  'Ferari', 
                ],
                styles: {
                  head: {
                    width: '830px', 
                  },
                  list: {
                    width: '824px', 
                  },
                },
              });

Default select with function nativeSelectMode

*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', 
                  },
                },
              });

Default select with function listDisplayMode

*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', 
                  },
                },
              });

Select with data from URL


                      const dropdown = new CGSelect({
              selector: '.cg-dropdown_three', 
              placeholder: 'URL', 
              url: 'https://jsonplaceholder.typicode.com/users',            
              searchMode: true,
              darkTheme: false,
              language: 'ru',
              styles: {
                head: {
                  width: '830px', 
                },
                list: {
                  width: '824px', 
                },
              },
            });

Setting up and adding a theme

Default theme:

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', 
                    lable: 'EXAMPLE', 
                    items: [
                      ...
                    ],
                    theme:  'dark / white'
                  });

Create custom theme:

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 ,
                lable?: object ,
              },
            };

Example:

CustomTheme

CustomThemeJson


                      const newTheme: CustomTheme = {
          name: 'test', 
          styles: {
            head:  'headTestClass', 
            list: 'listTestClass', ,
            placeholder: 'placeholderTestClass', ,
            caret: 'caretTestClass', ,
            search: 'searchTestClass', ,
            chips: 'chipsTestClass', ,
            lable: 'lableTestClass', ,
          },
        };


                      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: {},
            lable: {},
          },
        };

CSS


                          .headTestClass {
                background-color: #8297ff;
                color: white;
              }

              .listTestClass {
                background-color: #8297ff;
                border: 1px solid black;
                color: white ;
              }

Example custom theme in CG-Select

See an example of a select on codesandbox.io

Select constructor

Select Style Builder:

This is a constructor for styling a select online without downloading. For it to work, you need to:

Select a part of the select for customization.
Enter styles in the text field in the form "color: red;".
Click on the render button.

Use callbacks

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,
            });

Button control


                      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,
            });

Function disabled

You agree to the processing of data


                      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,
            });

CG-SELECT